Sheeprograming

つまりどんなの

こちらのページの右上のもの

どう使うの

とりあえず、関係する JS を読み込む。jQuery の plugin として作っているので jQuery も必要。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://shunshun94.web.fc2.com/lib/breadcrumb-list.js"></script>

そのうえで、今どこを読んでいるのかの基準にしたい要素群 (多分 h2 要素や h3 要素になる) に対して bindBreadcrumbList() 関数を実行する。

$("h2").bindBreadcrumbList();

ページを閲覧している人が画面をスクロールしていき、この関数を実行された要素を過ぎた際、各要素が BreadcrumbListEvent を発火させるようになる。それを listen すればよい。

$("h2").on("BreadcrumbListEvent", function(e){
  console.log($(e.target).text());
});

console.log になっている部分を画面上部に配置された今どこを見ているのかを示す案内の text を変えるとかそんなコードに書き換えれば使えるはず。

何をしたかったの?

入力欄に "" を入れて、その間に入力のカーソルが入る、みたいな状態を作りたかった。次のようになる。

どんな風に書いたのか

とりあえず jQuery を読み込む。別に jQuery を使わなくても input に使っている DOM が取れればなんでもいい。jQuery が簡単、というだけの話。

さらに、入力欄を作る。実行ボタンはとりあえずトリガーになるものが欲しいから入れているだけ。実際に使うとしたらショートカットボタンとかにバインドすることになりそう。

<input type="text" id="js-cursor-position-control-sample-input" />
<input type="button" id="js-cursor-position-control-sample-button" value="実行" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

JS を仕込む。やることは以下の4つ

1. トリガーとなる何かにイベントをバインドする。今回は button にした input 要素
2. 入力欄にテンプレートとなる文字列を入れる。今回は ""
3. 入力欄にフォーカスさせる
4. カーソルの位置を設定する。DOM の setSelectionRange を使い、1文字目の所から1文字目の所を選択する。つまり、0文字目と1文字目の間から0文字目と1文字目の間が選択されるので、文字はとくに選択されず、カーソルがそこに移動するだけ、となる。

var $button = $("#js-cursor-position-control-sample-button");
var $input = $("#js-cursor-position-control-sample-input");

$button.click(function(e){
  $input.val('""');
  $input.focus();
  $input.get(0).setSelectionRange(1, 1);
});

setSelectionRange

この記事を書いている時点ではHTMLInputElement.setSelectionRange() - Web API インターフェイス | MDN も日本語訳されてなかった。あまり使われてないのだろうか。3つの引数をとる関数である。

1. 開始地点
2. 終了地点
3. 選択した方向 (オプショナル)

今回の使い方では第三引数は関係ない。第三引数は文字列の先頭/終端のどっち側から選んで選択されたかを示す。わかりやすい例では Shift キーを押したまま選択する場所を変えるとどう挙動するか、があるだろうか。

特定文字列を選択させてコピペを促したりするのに便利そうである。

昨年10月に生まれた子が半年を迎えました。

不器用ながら哺乳瓶を持とうとしていた話もありましたが、今や短時間なら自力で持ち上げて飲めるようになりました。取っ手などいらぬ。

色々な人に会う度に可愛がって貰え、愛されているのだなぁ、と思います。同じように他人を愛する子になってほしい。

起こったこと

以下のエラーが出て Google App Engine へのアプリデプロイに失敗した。

C:\Users\hiyohitsu\Documents\★Hiyoko\hiyograms\linebot>gcloud preview app deploy
You are about to deploy the following modules:
- com-hiyoko-handson/default (from [C:\Users\hiyohitsu\Documents\★Hiyoko\hiyograms\linebot\app.yaml])
Deployed URL: [https://com-hiyoko-handson.appspot.com]

Do you want to continue (Y/n)? Y

Beginning deployment...

Verifying that Managed VMs are enabled and ready.
Building and pushing image for module [default]
ERROR: gcloud crashed (UnicodeDecodeError): 'ascii' codec can't decode byte 0x81 in position 26: ordinal not in range(128)

If you would like to report this issue, please run the following command:
gcloud feedback

何故

ファイルパスに ★ なんて入っているからですよ。

ascii 文字だけにファイルパスを変えたらうまくいった。

何故そんなディレクトリ名になってたんだよ

妻の趣味です……トラブルからやめてくれ、と言ったけど聞き入れてくれなかった

Node.jsによる必要最小限のhttpサーバとhttpsサーバとhttp proxyサーバ - Qiita 掲載の httpsサーバ をやろうとして pfxファイル secure.pfx は なんとか自分で用意してください。にぎゃふん、となった時の記憶。Windows 10 に最初から搭載されている機能でなんとかやれる。

簡単な手順

1. IIS (インターネット インフォメーション サービス) がデフォルトでは使えないので使えるようにする
2. IIS の機能で証明書を作成する

IIS を使えるようにする

コントロールパネルのプログラムにある Windows の機能の有効化または無効化 を選択する。

色々なサービスが一覧されているのでインターネットインフォメーションサービスにチェックを入れ、OK を押す。しばらく待つが、 IIS が利用可能になる。

証明書を作成する

画面右下の Windows マークを右クリックし、コンピュータの管理をクリック。サービスとアプリケーションの下にあるインターネットインフォメーションサービスをクリック。そのうえでメニューからサーバ証明書を探し出してクリック。

自己証明入り証明書の作成、をクリックすれば証明書が作れる。できた証明書は一覧されるので右クリックしエクスポートをクリックすれば PFX ファイルを保存できる。なお、証明書を作成する際にはパスワードを要求される。これを忘れると使えなくなるので注意。