HRR Co., Ltd.

技術的な記録を残していくことを目的としています。そのうち関係ないことを書き出しそう。

Chosenプラグインの使い方(発展編)

はじめに

Chosenプラグインネタ、第3弾です。

hrroct.hatenablog.com

hrroct.hatenablog.com

Webアプリを作成していると、どうしてもデフォルトの機能では仕様を満たせないこともあります。
そんな発展的な使い方を迫られている方に、お届けします。

仕組みを覗いてみる

内部の作りを理解することで、できることとできないことが見えてくるものです。
では、Chosenプラグインでは、どのような仕組みでステキなUIを実装しているのでしょうか。

ブラウザについている開発者ツールを使って、ソースコードを見てみましょう。
バージョンは下記の通りです。
jQuery 3.1.1
Chosen 1.6.2

<select id="target">
  <option></option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
</select>

上記がベースとなるselectタグです。
これに対して、

$('#target').chosen();

を実行すると…

<select id="target" style="display: none;">
  <option></option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
</select>

<div class="chosen-container chosen-container-single chosen-container-active chosen-with-drop" style="width: 94px;" title="" id="target_chosen">
  <a class="chosen-single">
    <span>1st Option</span>
    <div><b></b></div>
  </a>
  <div class="chosen-drop">
    <div class="chosen-search">
      <input type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
      <li class="active-result result-selected highlighted" data-option-array-index="1">1st Option</li>
      <li class="active-result" data-option-array-index="2">2nd Option</li>
      <li class="active-result" data-option-array-index="3">3rd Option</li>
    </ul>
  </div>
</div>

こうなります。
コード量が増えたことに、私はビックリでした。
そして、selectタグが"display: none;"で見えなくなっていることにもビックリ。
まるっきり、新しいタグを生成しているんですね。

この構造を知ると、

$('#target').trigger('chosen:updated');

という更新イベントを頻繁に実行しなくてはならない理由もわかります。
また、同時にあまり外から手を加えられないこともわかります。

というわけで

さらなるカスタマイズを望む場合、自動生成された部分をいじくる必要が出てきます。
自動生成後にJavaScriptでごにょごにょすればできないこともないですが…

オススメはしません。
バージョンアップのたびに追随していかなくてはいけなかったり、予期せぬ不具合を踏むことにもなりかねません。

最後に

これでChosenプラグイン3部作は完了となります。
どなたかの一助となることを祈っております。

以上でした!

Windows Updateを再開できた話

はじめに

あるときから、Windows Updateが自動で更新されずにそのままになっていました。
更新内容を能動的に取得しようとしても…
「更新プログラムを確認しています…」
で止まるんです…。

いろんなサイトに書いてあることを試してもダメでしたが、やーっと解決しましたので、共有します。

結論を先に書くと…

自動でUpdateされなくなった、最後のWindows Updateを手動でインストールしました。
そのあとは自動でWindows Updateが動くようになりました。

経緯

まずは対象のインストーラーを探す

「更新プログラムの最終確認日時」が2016年11月8日だったので、
2016年11月のWindows Update内容をGoogleで検索してみました。
そしたらこの月のWindows Updateは2016年11月9日。
なので、2016年11月のUpdate内容を探せばよい、ということです。

「2016年11月 Windows update kb」で検索すると、下記が見つかりました。

2016 年 11 月 Windows 7 SP1 および Windows Server 2008 R2 SP1 用のセキュリティ月例品質ロールアップ
https://support.microsoft.com/ja-jp/help/3197868/november-2016-security-monthly-quality-rollup-for-windows-7-sp1-and-windows-server-2008-r2-sp1

↓その流れで…

Microsoft®Update カタログ
Microsoft Update Catalog

ここにたどり着きました。

見つけたらダウンロード、インストールするのですが…

私の使用PCはWindows7の64bitなので、
「2016 年 11 月 x64 ベース システム用 Windows 7 向けセキュリティ マンスリー品質ロールアップ (KB3197868)」
を選んでダウンロードしました。

ここでインストール前の注意点。
Windows Updateのサービスを一旦止める必要があります。
コマンドプロンプトを立ち上げて(Windowsキー + r → "cmd"と入力してEnter)、下記コマンドを実行します。

C:\Users\******>net stop wuauserv
Windows Update サービスを停止中です.
Windows Update サービスは正常に停止されました。

停止が失敗した場合は、もう一度叩きましょう笑
私はそれで止まってくれました。

最後に

私の場合、これで「更新プログラムを確認しています…」で止まることがなくなりました。
もちろん、これで解決しない方もいると思います。
でもでも、一部の困っている方への一助となれば、これ幸いにございます。

以上でした!

CygwinでElectron製アプリを作りたい (1)

はじめに

electron.atom.io

Electronに興味を持ち、実際にいじってみようと思いました。
今回は環境を作ってサンプルを動かすところまでやります。
ちなみにCygwinで環境を作ります。

内容はelectron-quick-startを元にしています。

github.com

まずは環境構築

electron-quick-startにて、GitとNode.jsが必要だと明記されています。
まずはこれを揃えましょう。

Gitについては、サンプルのソースコードを取得するのに必要なのであって、今後も使用していくかは自由だと思われます。

Git

GitはCygwinでサポートされていますので、こちらを使いましょう。
やり方は2つあって、

apt-cygを使う

apt-cygについては、こちらの記事を参考にしてください。
ちょっと古いですが。

hrroct.hatenablog.com

下記コマンドを実行するとインストールできます。
ついでにバージョン情報を確認してみました。

$ apt-cyg install git
$ git --version
git version 2.12.2
Cygwinのセットアップ用のexeファイルを使う

64bitなら「setup-x86_64.exe」という名前です。
Cygwinを使っている方ならどこかにあるはず…
これを使用してGitをインストールしてもOKです。

Node.js

CygwinではNode.jsのサポートをしていないのか、apt-cygで探しても出てきません。
(ソースコードから入れることはできるかもしれませんが…試してません)

なので、Windowsのものをインストールして使うことになります。

Node.js

インストールが終わりましたら、npmコマンドを叩いてみましょう。

$ npm --version
4.2.0

問題なく使えそうですね。

electron-quick-start を起動する

下記コマンドを叩けと言われているので、適当な作業ディレクトリに移動してから叩きましょう。

# Clone this repository
git clone https://github.com/electron/electron-quick-start

# Go into the repository
cd electron-quick-start

# Install dependencies
npm install

# Run the app
npm start

これで、サンプルアプリが立ち上がります。

f:id:hrroct:20170525110847p:plain

次に見るべきは…

このドキュメントでしょうか。
electron.atom.io
Quick Startの詳細が書かれているので、自分がやったことの深掘りをするにはよいかもしれません。
※英語です

それと、electron-api-demosを見てみるとよいと思います。
同じ手順で、デモアプリをダウンロード、実行することができます。

$ git clone https://github.com/electron/electron-api-demos
$ cd electron-api-demos
$ npm install
$ npm start

これをみると、新しいウィンドウの作り方とか、メニューのカスタマイズとか、クリップボードの使い方とか、いろいろ書いてあります。
※やっぱり英語ですけど
自分がやりたいことへのイメージがついてくるのではないでしょうか。

さいごに

手順通りなので、あまり面白くはないですよね…
electron-quick-startは、環境を作って動作確認をする、くらいの意味合いなのかなぁと思いました。

自分が使いやすいファイラーを作ることが私の目標ですので、
学んだことはまたこちらで共有していきたいと思います。

以上でした!

実家にて無線LAN環境を整えてタブレットを導入した話

はじめに

大前提として、有線LANは既に使える状態にありました。
父(70過ぎ)がタブレットを欲しがっていたので、
 1. 無線LAN環境を整える(ルーターの選択、購入、設置)
 2. タブレットの選択と購入
を代わりにやりました、という話です。

ルーター5,000円、タブレット17,000円、合計22,000円くらいでした。

何を買ったの?

ルーター

その日のうちに設置まで済ませたかったので、近くの電気屋で買ってきました。
5,000円くらいしたんですが…ネットで買うほうが安かった…( ;∀;)

2階建てで使えるもの、かつ同時接続数が多いもの(これだと8台)を探した結果がこれでした。
実家なので人数が集まることを想定しました。
予算は抑えたかったので、安いものを選びましたが、特に問題なく動作してくれているようです。

設置については、難しいことはなく、説明書を読めばすぐに使えるようになっていると思います。
自宅ではBuffaloのルーターを導入しましたが、同じように簡単にセットアップができました。

タブレット

私自身がタブレットを持っていなかったので、ネットで評判やスペックを調べてこれにしました。
要望があったので、8インチで探してました。

Huaweiのタブレットをネットで買って実家に送付しました。
楽天だと17,000円くらいで売っていました。今はAmazonの方が安い…( ;∀;)

簡単にレビュー

設定のために実家に帰り触ってみましたが、まず(完全に私基準の印象ですが)軽くてビックリ。
ネット検索やYouTubeくらいなら動きもサクサク。
カメラも実家にあった古いデジカメよりも、全然性能がいいのでは。

元々入っているアプリは、Google関連が一式。あとはLINEも最初から入っているようでした。
LINEの設定だけ行って、使い方も簡単に説明しておきました。

これで、私から実家に孫の写真や動画を送りやすくなりました。
8インチもあれば、老眼の父も写真や文字の視認に問題はないようでした。

70過ぎの父がどこまでできたか?

実はルーターの設置だけしてその日は帰り、のちにタブレットが送られました。
Wi-Fi接続の設定をしてあげないと、しばらく使えなくてモヤモヤするだろうなぁと思っていたのですが…
困ることなく自分で設定できたみたいです。パスワードの話とかしてなかったんですが。

それに加え、カメラで既に写真を取っていたり、なかなかに使えているではないですか。
ちょっと心配しすぎでした。

一応、注意点としてルーターに書いてあるパスワードは簡単に他人に教えないように、とだけ伝えておきました。

最後に

外部にサポートを頼むと費用がかさみそうだったので、先に手を出せてよかったなと思っています。
もし同じ要望を持つ親御さんがいる方のお役に立てれば、幸いにございます。

以上でした!

文字列の省略 +「…」をTwigでやるには?

どういうこと?

要は長い文字列に対して、例えば15文字で切って、その後を「…」で省略する。
というのがやりたいことです。

CSSのtext-overflowでもできますが、そちらはwidthを指定するもので、文字の長さの指定ではありません。

やりかた

15文字で区切りたかったら…

{{ target.name|length > 15 ? target.name|slice(0, 15) ~ '…' : target.name }}

ただ、sliceの実装はTwig 1.6からになるので要注意です。
「自分のSymfonyに入ってるTwigのバージョンはいくつなんだろう?」
と思われた方は…

// vendor/twig/twig/lib/Twig/Environment.php

/**
 * Stores the Twig configuration.
 *
 * @author Fabien Potencier <fabien@symfony.com>
 */
class Twig_Environment
{
    const VERSION = '1.24.0';

ここに書いてあります。
最近のSymfonyだと、場所が変わっていたりして…。

短いですが、以上でした!