生活を良くします - 怠惰なプログラミング

読者です 読者をやめる 読者になる 読者になる

生活を良くします-怠惰なプログラミング

外資系でエンジニアをやっています。便利なサービスや商品、プログラミングで作ったものなどを紹介していきます

はてなブログでJavascriptを使い、カッテネをちょっと自動化してみた

プログラミング 仕事 便利

Javascriptを使ってみた

カッテネとは

紹介した商品をおしゃれに表示できる非常に便利なツールのことです。詳しいことは作者のwebページを見ればわかりますし、設置の方法なども詳しく書いてあります。このような綺麗なリンクが貼れるようになります。

画像や、タイトル、kindle、Amazonなどとボタンが綺麗に配置されており、クリックすれば適切な場所に飛ばされます。

webfood.info

ただURLを抜き出すのが少し手間

デザインも良く使いやすいカッテネですが、URLを抜き出して各自で設定する必要があります。これが結構ミスる。たぶん自分はかなり注意力散漫なところがあるため、いつもURLに余計な文字をコピペして含んでしまったり、足りなかったりしている。そこでなんとかしてミスが減らせないかと考えて多少、楽になるように設計しました。キャッシュでやる方法がわからなかったため、こちらでも手動です。

また、はてなではJavaScriptが使用できないと思っていましたが、使えることがわかったのでその練習としても活用しました。

使い方
商品の説明文と各アフィリエイトサイトから発行される商品のURLを、リンク別に貼るだけです。A8.net や もしもアフィリを対象にしています。これらを使っていない人は、この機会に登録しておいても損はないと思います。無料で登録、掲載が可能になります。下記のように、掲載する商品を選択してamazon,kindle,楽天という風に分類してURLを貼り付けると上手くいくはずです。たぶん。
f:id:what_a_day:20161106224100p:plain

商品の説明と、各URLを全て打ち終わった後は、「push here」と書かれているところをクリックします。すると、HTMLのソースコードができるので後は自分のブログに貼り付けるだけです。ほとんど自分用に作ったため、今回は本のみを対象にしています。本以外に使用したい場合は、出来上がったhtmlソースからkindleと楽天Koboの行を消し去ってくれれば動くと思います。


続編
what-a-day.hatenablog.com


















"ここにコードができます。全文をブログに貼り付ければ動きます。設定は上のサイトを参考に"





微調整を加えたテスト中




この下の例は、楽天とKoboにはリンクを貼っていません。そのため、ちゃんと使用するには楽天とkoboのリンク先をコードを見ながら消したほうがいいのです。


するとこうなります。すっきりしました。