Select like a bossが地味に便利
Select like a boss のご紹介
便利な拡張機能のご紹介です。
Webサイト上のリンクされたテキストの一部を「普通に」選択できる機能です。
地味ですが便利です。
詳細
通常、Webサイト上のリンクされたテキストの一部を選択することはできません。
リンクテキストごと掴んでしまうのではないでしょうか。
それを通常のテキストのように選択できるようにするのが、この拡張機能/アドオンです。
Google Chrome拡張機能、Firefoxアドオン、Opera拡張機能があります。
画像を見る限り、本家はOperaなのでしょうか。
(2021/10/18追記: しかし現状のOperaはChromiumベースなので、Chrome拡張のものを使うことになりそう。リンク切れてましたし)
具体例
試しに、このサイトにアクセスして、リンクテキストの一部を選択してみました。
https://www.google.co.jp/chrome/browser/desktop/index.html
きちんと「フォーム」という文字列だけ選択できているのが確認できると思います。
ただし…
Google ChromeでHTMLを見てみると、該当のaタグにdata属性が追加されていました。
「data-select-like-a-boss="1"」これです。
<a class="show-dialog-options hide-cros" data-g-event="cta" href="#" data-select-like-a-boss="1">別のプラットフォーム向けのChrome をダウンロード</a>
他のブラウザでは調べていませんが、ソースコードのコピーの際にはご注意を…。
おまけ
Select like a boss.
「上司のように選択する」って何?と思ったので調べました。
上司 = 自分よりも上のレベルということで「プロ」「とっても上手」「鬼のように」「かっこよく」という意味があるようです。
あちらのボスのイメージはそういう感じなんですね。
以上でした!
Chosenプラグインの使い方(発展編)
仕組みを覗いてみる
内部の作りを理解することで、できることとできないことが見えてくるものです。
では、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でごにょごにょすればできないこともないですが…
オススメはしません。
バージョンアップのたびに追随していかなくてはいけなかったり、予期せぬ不具合を踏むことにもなりかねません。
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 サービスは正常に停止されました。
停止が失敗した場合は、もう一度叩きましょう笑
私はそれで止まってくれました。
最後に
私の場合、これで「更新プログラムを確認しています…」で止まることがなくなりました。
もちろん、これで解決しない方もいると思います。
でもでも、一部の困っている方への一助となれば、これ幸いにございます。
以上でした!
Electronのサンプルを動かしてみる
はじめに
Electronに興味を持ち、実際にいじってみようと思いました。
今回は環境を作ってサンプルを動かすところまでやります。
ちなみにCygwinで環境を作ります。
内容はelectron-quick-startを元にしています。
まずは環境構築
electron-quick-startにて、GitとNode.jsが必要だと明記されています。
まずはこれを揃えましょう。
Gitについては、サンプルのソースコードを取得するのに必要なのであって、今後も使用していくかは自由だと思われます。
Git
GitはCygwinでサポートされていますので、こちらを使いましょう。
やり方は2つあって、
apt-cygを使う
apt-cygについては、こちらの記事を参考にしてください。
ちょっと古いですが。
下記コマンドを実行するとインストールできます。
ついでにバージョン情報を確認してみました。
$ apt-cyg install git
$ git --version
git version 2.12.2
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
これで、サンプルアプリが立ち上がります。
次に見るべきは…
このドキュメントでしょうか。
https://electron.atom.io/docs/tutorial/quick-start/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円くらいしたんですが…ネットで買うほうが安かった…( ;∀;)
I-O DATA Wi-Fi 無線LAN ルータ Nintendo Switch 動作確認済 11ac 867Mbps ペイバック保証&土日サポート WN-AC1167R
- 出版社/メーカー: アイ・オー・データ
- 発売日: 2016/08/10
- メディア: Personal Computers
- この商品を含むブログを見る
2階建てで使えるもの、かつ同時接続数が多いもの(これだと8台)を探した結果がこれでした。
実家なので人数が集まることを想定しました。
予算は抑えたかったので、安いものを選びましたが、特に問題なく動作してくれているようです。
設置については、難しいことはなく、説明書を読めばすぐに使えるようになっていると思います。
自宅ではBuffaloのルーターを導入しましたが、同じように簡単にセットアップができました。
タブレット
私自身がタブレットを持っていなかったので、ネットで評判やスペックを調べてこれにしました。
要望があったので、8インチで探してました。
Huawei 8インチ タブレット MediaPad T2 8.0 PRO ホワイト ※Wi-Fiモデル RAM 2GB/ROM 16GB【日本正規代理店品】
- 出版社/メーカー: Huawei
- 発売日: 2016/12/09
- メディア: Personal Computers
- この商品を含むブログ (1件) を見る
Huaweiのタブレットをネットで買って実家に送付しました。
楽天だと17,000円くらいで売っていました。今はAmazonの方が安い…( ;∀;)
70過ぎの父がどこまでできたか?
実はルーターの設置だけしてその日は帰り、のちにタブレットが送られました。
Wi-Fi接続の設定をしてあげないと、しばらく使えなくてモヤモヤするだろうなぁと思っていたのですが…
困ることなく自分で設定できたみたいです。パスワードの話とかしてなかったんですが。
それに加え、カメラで既に写真を取っていたり、なかなかに使えているではないですか。
ちょっと心配しすぎでした。
一応、注意点としてルーターに書いてあるパスワードは簡単に他人に教えないように、とだけ伝えておきました。
最後に
外部にサポートを頼むと費用がかさみそうだったので、先に手を出せてよかったなと思っています。
もし同じ要望を持つ親御さんがいる方のお役に立てれば、幸いにございます。
以上でした!