ぺんちゃん日記

食と歴史と IT と。 Web の旅人ぺんじろうが好奇心赴くままに彷徨います 。

はてなブログに過去の記事の一部を表示できるか?

コピペは負の遺産を生む。

前回の続きです。
過去の記事の一部分を新しい記事でも繰り返し使い回したい。
つまり定型文のテンプレートを用意して引用することで面倒事を回避したいということでした。
Google 先生に問い合わせたところ、 Script タグで過去の記事の DIVブロックを 読み込むということでした。
それで前回の記事にテンプレートを用意したのでした。
今回はそのテンプレートをここで表示して動作確認してみます。

果たしてこの下に挿入できているでしょうか?


動かねえじゃねえか。
一体どういう仕組みで読み込んでるんだ?

ちなみに空行のあたりにはこういうコードが記述されています。

<script type="text/javascript">
$(function(){
$("#insert-div").load("http://yasushiito.hatenablog.com/entry/2019/05/13/073000 #test-template");
});
</script>
<div id="insert-div"></div>

諦めるな。

心がくじけて諦めそうになりますが、 もう少し粘ってみます。
$(を見かけたら jQuery
私の経験はそう告げます。
jQuery で読み込みが完了したら該当ページの DIV タグを読み込んでいることは想像つきますけど、 jQuery の load イベントに URL を直接指定して読み込むことができたっけ?

そして Script タグって自動で JavaScript コードだと判別してくれたっけ?

このページにも同様のやり方が書いてあるので、確かにロードイベントで URL と ID を渡して他のページを参照することは可能なようです。

もしかしてはてなブログでは jQuery 使えないのかな?
ロードのタイミングをミスっているか、どちらかが原因でしょう。
ということではてなブログ jQuery で検索してみました。
それっぽい内容はこちら
なるほどやはりロードのタイミングが問題のようですね。
うちのサイトも同様にウインドウ全体がロードされるのを待ってから挿入してみましょう。
修正されたコードはこちら。

<script type="text/javascript">
window.onload = function(){
$("#insert-div-win").load("http://yasushiito.hatenablog.com/entry/2019/05/13/073000 #test-template");
};
</script>
<div id="insert-div-win"></div>

この下に表示されれば成功です。


無事読み込まれました。

まとめ。

このスプリクトが動く限りはテンプレートを一元管理できます。
これで負の遺産を残さずに住むようになったかもしれません。
テンプレート挿入スクリプトはページ全体が読み込み終わってから起動するので表示されるまで少々時間がかかるようです。
スクリプトが発動するタイミングはページがロードされた時なので、既にロードされているとテンプレートは挿入されません。
そんなことあるんかいな?
例えば記事を更新し終わったあたりのタイミングなどです。
ページ遷移しないで記事が表示されてしまうとウィンドウのロードイベントが起動されないままページの描画が終了してしまいます。
読者がこの状況に出くわすことはあまりないと思いますが、ブログオーナーは割と頻繁に出会うと思います。
コンテンツの一部が損なわれていると少しドキッとしますので留意しておいてください。

振り返り。

参考にしたページの両者に共通してもやっとした点がありまして。
URL の後ろの#記号の直前にスペースが空いているのですよ。

entry/2019/05/13/073000 #test-template

これはアンカータグに見られるラベルかと思いましたが、何やら別の意味があるらしくてスペースを入れないと期待通りに動かないようです。
jQuery が ID を判別するためのスペースなのでしょうか?
全く未熟なものですね。

このページによると jQuery 1.2では URL の後ろに jQuery セレクタ記述できるようです。

追記:。

テンプレート側に見出しを使うと何も表示できなくなるようです。
原因は不明です。
使用できない表現が他にもあるかもしれません。

過去の記事の一部をテンプレートとして再利用できるようにする。

あーめんどくさい。

毎度毎度同じ文章をブログ記事に貼り付けるのはとても手間がかかります。
例えば公開中のソフトウェアのインストール方法などは関係する記事ごとにあった方が親切なと思います。
ここ最近のこのブログで言うなら、AutoHotkeyの記事などでGitHubリポジトリとダウンロード&初期設定の説明です。
あまりにも面倒なので今はやろうという気持ちにもなりません。
面倒事は諦めて放置しても良いのですが…。
面倒事は機械にやらせろ!
工夫して自動化のチャンス!

解決法をイメージしてみる。

それコピペでできるよ。

定型文章ですから、繰り返し使われる文章はどこかに保存してコピペすれば済む話です。
実際にコピペで貼り付けている文章もあります。
ほとんどの場合はコピペ的な手段で解決できるはずです。

恐れるのは負の遺産

そうは言っても、後から定型文の修正が入った時に該当するページすべてを更新するはめになるのは避けたいです。
例えば「ここをクリックしてダウンロードしてください」という文章をコピペで差し込んだとしましょう。
もし保存ファイルの場所が変更されてしまった場合、デッドリンクになりますから修正しなければなりません。
もし、100個の記事でコピペの差し込みを行ってしまったとしましょう。
その場合、修正箇所も同じく100個になってしまいます。
ソフトウェア業界ではこういう現象を負の遺産と言います。
丁寧な仕事で築き上げた資産だったものが なくなるどころかマイナスの影響を及ぼす ようになってしまうことが往々にしてあるのです。
コピペすればするほど地獄が待っているという。

借金減らすには。

同じ作業を繰り返さないことです。
似たような作業を一箇所に集める。
ソフトウェアの基本ですね。

ネットのどこかにあらかじめテンプレートを用意して、それを参照して表示してくれれば、テンプレートを変更するだけで全ての記事を修正できます。
GitHubソースコードは別の場所にアッロードされたデータを引っ張り出して表示できてるじゃないですか。
ソースコードを編集したら連動して更新されるし。
頻繁に使われる定型文でも同じようなことができれば良いのです。

願望を手に入れる。

そんな都合のいいことできるんかいな?
信じるものは意外と救われるかもしれません。
次の記事にそのやり方が書いてあります。

www.foxism.jp


まあ試しにやってみましょう。
次の段落をこちらの記事で参照してみます。


ここからテンプレートを開始します。

f:id:yasushiito:20190512084657p:plain

  • GitHubのファイルを参照できること。

ここまではテンプレートです。

これから参照する側の記事を書きます

たとえ生まれ変わってもこれだけはごめんだ!?

生まれ変わったら何になりたい?

輪廻転生を信じる信じないに関わらず生まれ変わってやり直すならどんな生き方をしたいかという話題はよくありますね。
男か女か、同じ相手と結婚したいか、そして人間よりも幸せそうに生きていそうな動物になりたいか、話題は尽きませんよね。
それとは逆になりたくない人生については意外と語られないものです。
そこで質問。
この動物にだけは生まれ変わりたくないって生き物あります?

これだけはごめんだ。

私が考える最も最悪な生き物。
それは鶏です。
特にレグホーンと呼ばれる採卵鶏はとっても過酷です。

1/2でゲームオーバー。

まず第一弾のハードルは男の子か女の子かの選別です。
卵を産ませるための家畜なので、生まないものに価値はありません。
つまり卵を産まない男の子は育てても意味がないのです。

www.hopeforanimals.org

1/2で生まれた瞬間に廃棄処分 となります。
辛すぎる……。
鶏肉にすればよいではないかと思いますが、卵を産む能力に特化した品種改良がなされているので、肉付きが悪い&肉の質がよろしくないのです。
餌を食べさせて育ててもブロイラーに負けて売れないんだから育てる意味がないという判断だからですね。

ダンボールやバケツなどに上からどんどん押し込まれて、最終的にはひよこ色の塊にされてしまうのです。
その肥料または動物の餌として処分されます。
肥料といえば聞こえはいいですが、病気とか臭いが出ないように処理されて埋められるだけじゃないですか。

saruwakakun.com

とってもかわいそう。

助ける方法はないの?

昔はこういうひよこが縁日の屋台で販売されていました。
売れる数は少ないですが、それで助かるひよこはいたのです。
しかし100%オスですから成長すると毎朝高らかにコケコッコーするようになります。
たちどころに近所から苦情が来るということが周知されてしまい、全く売れなくなってしまいました。
そこでスプレーでピンク色に染めてカラーひよことして販売しました。
ところが、これが動物虐待だと非難されて屋台で引き取り手を待つ可能性もゼロになりました。
たとえピンクに染められても買い手が見つかれば処分されずに済んだのに。
皮肉なものですね。

ja.wikipedia.org

助かった女の子は。

搾取の日々。

無事生き延びたメスは半年ほどで卵を産み始めます。
ケージの中に押し込められて来る日も来る日も卵を産み続けます。
平均算出数は1年間です280個程度のようです。
毎日産むと言っても過言ではありません。
もし鶏舎に一羽でもインフルが発生したら連帯責任で全員殺処分です。

鶏だってアンチエイジング

1年ほど卵を産んだら再び生命の危機が訪れます。
卵の質が落ちてきて数も減ってくるからです。
鶏としてはまだまだ若く元気なのですが、産卵した卵の販売価格よりも投入する餌の費用の方が高くなるので採算に合わないのです。
つまり飼育し続けるほど赤字がかさむので、お役御免となるのです。
経営方針によっては、ここで処分です。
しかし助かる方法が一つあります。
アンチエイジングです。
ただし決して生易しいものではありません。
鶏は2週間程断食させると生命の危機を感じて再び活力を取り戻します。
手っ取り早く言えばショック療法です。
飢餓状態で栄養を守るために羽毛がすべて抜け落ちるほどです。
これを強制換羽と呼んでいます。
強制換羽については次のページが詳しいです。

www.hopeforanimals.org

絶食2週間となれば餓死寸前です。
実際衰弱して餓死するニワトリもいます。
この難関をくぐり抜ければしばらくの間は生きながらえることができます。

ボロボロになるまで働いた後は。

ショック療法を乗り越えて生き延びることができました。
しかし、それもいつまでも続きません。
1年も経たないうちに再び産卵能力が落ちてきて今度こそ力を取り戻すことができなくなってしまいます。
そうなるとやはり廃棄処分です。
採卵鶏はもともと肉付きが悪く肉の質も高くなく、おまけに年を取って肉が固くなってしまっているため販売価値はほとんどありません。
年を取ると言っても老鳥になったわけではなく成鶏です。
人間なら脂が乗っていよいよこれからという年齢です。
ところが現代の消費者はブロイラーの柔らかさにすっかり慣れてしまって、少しでも硬いとまずいと感じてしまうのです。
zookan.lin.gr.jp

外国産のブロイラーが格安で輸入されてくると、味と価格の両面で負けてしまうので利用価値はほとんどないのです。
昔は鶏を大切に飼っていたので、鶏肉になるのは歳をとった鶏だけでした。
それらは決して柔らかいものではなかったので、お年寄り達は懐かしい鶏の味に感じるそうです。
時代が変わるとごちそうの種類も変わってしまうのです。

他の用途はないの?

人間にとって美味しくないならペットフードにできないものだろうか?と誰もが思いますが、鶏の骨はささくれると内臓を傷つけるので食べさせてはいけないのですよね。
そのため機械で解体することは難しく、手作業で解体する。
となると人件費がかさんでしまうので再利用は比較的難しいのです。

まとめ。

今日もおいしく鶏肉をいただきました。
卵も食べます。
私にはきっと鶏ガラが使われていることでしょう。
罪の意識はありますが、食べないわけにはいかないのでありがたくいただくことにしています。
日本人は「いただきます」とさえ言えば命を奪う罪は許されると気軽に考えますが、その「いただきます」の裏側には「いただかれなかった命」も間違いなくあるのです。
少々救いなのは最近では穀物価格は高騰しています。
それに従い鶏肉の価格も上がっています。
消費者にとって歓迎できるものではありませんが、そのおかげで食べ物としての再利用が見直されています。
結局殺してしまうわけですが、人間が背負った業を意識しながら。「いただきます」できないと気持ちが落ち着きませんね。

www.morieisuke.com

【AutoHotkey】ホット ストリングも使って楽をしたかった(願望)。

f:id:yasushiito:20190403184928p:plain

ホットストリングって何?

ホット ストリングは直前のキーボードの入力文字を調べて、特定の省略文字が入力されたら自動で展開してくれる機能です。
例えば「tkg」と入力すれば「 卵かけご飯」に展開されるといった具合です。
なかなか便利そうな機能ですが、AutoHotkey以外の手段でも実現できないものでしょうか?
あなたがもしリッチなエディタを使っているなら、入力補完やコードスニペットを使うことができます。
とはいえ常にリッチなエディタを使っているとは限りません。
ブラウザ上で作業したりオフィスアプリケーションを利用していることもあります。
ホット ストリングならWindows 上のアプリケーションで入力できる場所であればほぼ間違いなく利用することができます。

私にも使えるのか?

私は専ら音声入力なので 、あまり縁がありません。
IME で日本語入力している時にも邪魔になります。
こんな私でもホット ストリングが欲しくなる状況があります。
メールアドレスの入力です。
度々要求される割には入力量が多いのですよね。
今のところコピペで対応していますがホット ストリングの方が絶対クールですよ。
例えばy@pと入力すれば、yxxxxxx@pxxxxxxx.comのように展開し、y@gと入力すれば、yxxxxxxx@gxxxx.comのように展開されるといった具合です。
気をつけなければいけないのは意図しない状況で展開されてしまうことです。
例えば自分の名前を「name」で展開するように設定してしまうと、「なめこ」と入力した時にnameの時点で勝手に展開されてしまいます。
ホットストリングでは日常では現れない文字の組み合わせでなければなりません。
今回使おうとしている@は普段はメールアドレスくらいしか使うことがありませんから最適な記号と言えます。
ところが私の場合はプログラムを作成します。
この記号は様々な言語で特殊な意味を持つことが多いので、プログラミング言語を使う場合は頻繁に利用します。
ホットストリングを使う場合は「覚えやすく使われない文字列」を考える工夫が必要です。

意外なところで待ち受ける罠。

ところがどっこい。
ホットストリングはマウスクリックが行われた場合、キー入力の内容がリセットされてしまいます。
つまり「tkg」で展開したくてもkをクリックした瞬間にtを入力した記録が消されてしまいます。
そう私はマウスでスクリーンキーボードからキー入力しているのです。
こいつはダメだ。

【AutoHotkey】Amazon リンクの埋め込み修正した。

先日記事にした Amazon リンクをはてなブログに埋め込む作業を自動化する Auto HOT key スクリプトについて、早速不具合に遭遇しまくったので修正しました。

次の記事を見ると URL に含まれる asin コードの中でも GP で始まるものは決して例外的なものではないようです。

qiita.com

GP で始まるタイプにも対応できるように修正しました。


ahkwiki.net


どちらのタイプでもない場合に処理を中断するように支えています。

この記事に登場するAutohotkey スクリプトについて

この記事の中で私が作成したプログラムは、全て自由に使うことができます。
詳しくはこちら

【AutoHotkey】たまには本で学習してみるか。

大切なものを見落としていないか。

AutoHotkeyでプログラムを作り始めて3ヶ月程度経ちました。
出来上がらスクリプトもだいぶこなれてきて無駄なコードが減ってきたと思います。
まあそれでもウェブのリファレンス、しかも日本語版をざっくり読んだだけで手を動かしているので、基本的な知識を収集し損ねている恐れもあります。
そこで体系的な知識をおさらいするために書籍の形で学ぶことにしました。
Kindle も使えるようになったしね。
Amazon ギフト券を Kindle の本でワンクリック購入できているか確認もしたかったし。

初心者向けの本を読んでみる。

ノンプログラマーと初心者のためのAutoHotkeyの使い方超入門という本を見つけたので購入してみます。
240円だったし。

ノンプログラマ向けの方をガチガチのプログラマが読んで得るものがあるかと問われますと、あります。
自分の知識が間違っていないか確認もできるし。

初心者向けなのでダウンロードから始まってインストール、エディタ選びからスクリプトの編集方法ととても丁寧に導いてくれます。
当たり前のことをひとつひとつ丁寧に教えて行くのって簡単なようでとても難しい。
「それくらいわかるだろ」で済ませたくなります。
分かりきってるであろうことを、それでも説明してあるのには頭が下がります。ただやり方を例示するだけでなく、プログラミング未経験者がプログラムに挑戦する理由も提示してくれます。
この本を読むことでどんなメリットがありどんな未来が訪れるかを想像させてくれます。
第5章からは実践的な内容になります。
みんなが無意識を繰り返している身近な作業を爆速にしてくれるサンプルで学ぶことができます。
ESC キーを2連続で押すことで呼び出されるスクリプトの作り方は大変参考になりました。
だんだん割り開けるキーが少なくなってくるんですよね。

まとめ。
controllsendを使えば背面にあるウィンドウにキー送信できることを知ることができました。
なんだって!?
過去の記事を見ていただければ分かりますが、私は常にウィンドウをアクティブにしてキー送信しています。
もしかしてもっとスマートに実装できたんじゃないの?
ちょっと恥ずかしさで冷や汗が出ました。
しかし私が扱いたい ChromeFirefoxWindowssdk を利用したものではないのでコントロールを捕まえることはできないんじゃないのかな?
たぶんなんとなくそれが分かっていたから send コマンドで実装する方針にしたんだと思う。
慌てて調査しましたが、予想通り利用しているブラウザには使えませんでした。
まぁしかし重大な見落としがあったのは事実です。
今後は注意することにしましょう。

ノンプログラマーや初心者が読んでも理解できるか?という問いには私は答える資格がありません。
内容のほとんどはすでに理解しているものなので時間もそれほどかかりませんでした。

【AutoHotkey】編集中のはてなブログの記事にAmazon ページから Amazon リンクを埋め込む。

f:id:yasushiito:20190403184928p:plain

問題を抱えている。

はてなブログの記事に Amazon の商品を紹介したい時のことです。
紹介したいアイテムの URL を貼り付けたらそれっぽくなってくれると思うじゃないですか。

Amazon の url を編集フォームにコピペしてみてください。
きっとこんな感じになると思います。

www.amazon.co.jp

残念ながら商品のイメージが表示されません。
しかもアフィリエイトとしても効果はありません。

はてなブログAmazon 商品紹介したい時はサイドバーに表示される Amazon 商品紹介機能で記事に貼り付けます。

f:id:yasushiito:20190507153255j:plain

こんな感じになります。

現代語訳 論語と算盤 (ちくま新書)

現代語訳 論語と算盤 (ちくま新書)

しかしこれが大変手間がかかります。
というのも手順がとても非効率。
検索ボックスに商品名を入力してリスト表示されるアイテムを選択する流れでしか埋め込めないからです。
そうなんです。
必要なのは商品名なんです。
商品名による検索って役に立ちます?
似たようなアイテムまで引っかかってしまって自分が何を紹介したいのか区別つかなくなりません?
例えば本を紹介したい場合、書籍と Kindle 版があるはずですが、簡単には区別がつかないですね。
さらに書籍にはハードカバーと文庫本があるものもあります。
ロングセラーになると改訂版があることも。
後から貼り間違えているのに気がついて修正することもしばしばです。
はてな公式で提供されている機能が使いにくいったらありゃしない。
かといって表示ページの中から asin コードを抜き出してコピペするとか、正気を保ったまま作業できません。
この辺多分専用のアフィリエイターの方々はとっても便利な有料ツールを使っていると思われますが、私にはそこまでの意欲はございません。

結局私は何がしたいのか。

ただただはてなの [asin:で始まる Amazon 記法で埋め込みできればいいだけなんです。
Amazon の商品には必ず asin コードというのが割り当てられています。
商品ページに表示されています。

f:id:yasushiito:20190507153749p:plain

中には表示スタイルが違う商品にも出くわすことがあります。
もう一つ asin コードが含まれるものに URL があります。
商品の URL の次の部分を注目してください。

f:id:yasushiito:20190507154007p:plain

この部分が asin コードです。
中には違うスタイルの商品はあるかもしれませんが、今回はそういう商品は考えないことにします。
この記事を書いている間にもgp/product/で始まる商品も見つけてしまいました。

私ははてな記法で記事を書いているので次のようになります。

[asin:asinコード:detail]

ページの中から asin コードを探し出してタブを作成すれば良いのですね。
そこでいつも通りAutoHotkeyで自動化します。

スクリプトの仕様。

  • Google Chromeはてなブログの記事を新規作成で編集しておいて、別のタブで Amazon の商品ページを閲覧していることとします。
  • この状態でスクリプトを実行すると、商品ページの URL を取り込み、 asin コードと思われる部分を取り出します。
  • asin コードの判定はdp/で始まる英数字の羅列とします。
  • その asin コードを使ってはてな記法Amazon 埋め込みリンク(詳細版) をクリップボードに転送します。
  • Chrome のタブを選択してブログの編集ページを表示させたら、クリップボードからペーストします。挿入位置はカーソルに従います。
  • リンクを挿入したい場所にあらかじめ入力カーソルを移動させておきます。

スクリプトの解説。

ほとんどが過去に作った編集中のブログ記事に挿入型のプログラムと同じですね。
独自の部分は正規表現による asin コードの抽出でしょう。
正規表現を使うことで強力な文字列操作を行うことができます。
初心者には難しいと思いますが、 Auto HOT key 以外のプログラミング言語でも同じように使えるので、習得して公開することは絶対にありません。

まずはdp/を手がかりにして探します。
正規表現では\wで英数字を検索することができます。
*を後ろにつけることで、英数字が続く限りヒットし続けるようにできます。
余分に引っかかったdp/を削除すれば残った部分は asin コードです。

注意点としては、 URL に偶然dp/という組み合わせが入り込んでしまうと認識をミスします。

ahkwiki.net

まとめ。

これで紹介したいアイテムを間違えて貼り付けることはなくなりました。
記事を書くときは商品ページをひらいで確認しながら作業するので作業工程は短縮されたと思います。
Amazon の asin のことをきちんと理解しないまま作成しているので穴はたくさんあると思います。
問題が発生するたびに修正を重ねていきたいと思います。

この記事に登場するAutohotkey スクリプトについて

この記事の中で私が作成したプログラムは、全て自由に使うことができます。
詳しくはこちら