ドリリウム

趣味をとことん突き詰めるブログ。ペット / フィンチ / 鳥 / 文鳥 / ジュウシマツ / 写真 / カメラ / 高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E type / EOS Kiss M

こんにちは。カタミチ(@katamichi2h)です。

お問い合わせsyufukc@gmail.com / Twitter

ブログに便利なツール集を公開しました。

f:id:katamichinijikan:20190629132152p:plain

Amazonベースではなくなったカエレバさんの代替案を作ったり、Amazon・楽天・Yahoo!ショッピングの検索結果リンクをまとめて作れるようにしたり、ブログ記事に乗せるテーブルタグを自動で作ったり、レビューなんかで便利なサイズ比較画像を作ったり。

 

これまでこうした作業の自動化をExcelで行ってきましたが、気が向いてJavascriptで作って公開してみました。

 

BLOGTOOLS : https://blog-tools.jpn.org/

 

完全に個人で使用していたものを公開した形になるので、癖があると思います。

また、動作が不安定な部分やバグもあるでしょう。

 

まずは自分用として公開しつつ、出来れば多くの人に使っていただいて改善につなげられたらなぁなんて思っています。

 

機能は今のところ5つあります。

すべて私が個人的に自動化して使っていたツールです。

アフィリエイトリンク生成

その名の通りアフィリエイトリンクを生成します。

これを作ったキッカケはAmazonのAPI仕様変更によりカエレバさんがAmazonベースでなくなってしまったから。

従来どおりAmazonベースのリンクを作りたくて製作しました。

APIを使う案は以前検討したとおり難しいので、ちょっと違った方法でリンクを生成しています。

生成されるコードは、ほぼ以前のカエレバさんで生成していたコードそのままです。

 

使い方は簡単。

AmazonアソシエイトID、楽天市場アフィリエイトID、Yahoo!ショッピング(バリューコマースのsidとpid)を設定します。

f:id:katamichinijikan:20190629124242p:plain

これらはcookieに保存されます。

楽天市場とYahoo!ショッピング分は任意入力です。

 

次にAmazonアソシエイト画像リンクを取得します。

f:id:katamichinijikan:20190629124059p:plain

リンクを作りたい商品ページを開いて、アソシエイトツールバーを使ってリンクを取得すると楽ちんです。

最後にAmazonのページから商品名をコピーして「Amazon商品名」に貼り付けます。

別名を付けても構いません。

 

f:id:katamichinijikan:20190629124357p:plain

「楽天市場/Yahoo!ショッピング用検索キーワード」は、入力しなければ「Amazon商品名」が自動検索されます。

しかし、Amazonの商品名は時折不親切なものもあって、そのまま楽天市場やYahoo!ショッピングを検索してもうまく該当商品が見つからない場合があります。その場合には、ここに適当なキーワードを手入力すると検索キーワードを自動的に置き換えてくれます。

 

最後に「アフィリエイトリンクを生成する」をクリックすればOK。

f:id:katamichinijikan:20190629124729p:plain

生成されたコードはクリックすれば自動的にクリップボードにコピーします。

生成されるコードはこんな感じです。

<div>
<div>
<div><a href="" target="_blank"><img style="border: none;" src="" /></a></div>
<div>
<div><a href="" target="_blank">南三陸モアイファミリー ミニモアイ像 7体セット</a></div>
<div>
<div><a href="" target="_blank">Amazonで見る</a></div>
<div><a href="" target="_blank">楽天市場で見る</a></div>
<div><a href="" target="_blank">Yahooショッピングで見る<img src="" width="1" height="1" border="0" /></a></div>
</div>
</div>
</div>
</div>

カエレバさんで生成できるコードと同じように、適当な形でdivで囲ってあります。

更に、「カエレバ風のクラス名を設定する」にチェックを入れていただくと、カエレバさんで生成されるコードと同じようにクラス名が設定されます。

f:id:katamichinijikan:20190629125049p:plain

カエレバさんで使用していたデザインがそのまま適用できて便利です。

 

▼表示するとこんな感じ。デザイン設定は各自で。

アフィリエイトキーワード検索リンク生成

Amazon、楽天、Yahoo!ショッピングのキーワード検索結果のアフィリエイトURLを一括で生成します。

使い方はほとんど同じ。

f:id:katamichinijikan:20190629125323p:plain

AmazonアソシエイトID、楽天市場アフィリエイトID、Yahoo!ショッピング(バリューコマースのsidとpid)を設定します。

検索キーワードを入力して「キーワードリンクを生成する」をクリックすれば、検索結果画面のアフィリエイトリンクがまとめて生成できます。

 

最後に「ちょっと整形してまとめたやつ」はdivタグでいい感じに囲って整形したものです。

デザインを設定してまとめて表示したい時に使います。

こんな感じ。

テーブルタグ生成

ブログの記事内でテーブル(表組み)を使いたい時、ブログサービスによっては便利な内蔵エディタ機能がありますが、はてなブログにはありません。

手打ちでテーブルタグを打っていると面倒くさく、既存のサービスもいまいち余計な機能が多いことが多くて自作して使っていました。

 

まずは列数と行数を指定します。

次に、ヘッダー行やヘッダー列(thタグ)が必要な場合にはその行数・列数を指定します。

f:id:katamichinijikan:20190629130428p:plain

下には列数・行数・ヘッダーの数を変更すると自動で反映されるプレビューがついています。

また、デザイン設定の項目でテーブル自体のクラス、各行・各列のセルのクラスをまとめて設定できるようにしてあります。

 

そのまま「テーブルタグを生成する」ボタンを押下すれば、テーブルタグが生成されます。

もしデータもまとめて入力したい場合には、プレビュー画面のテーブルにそのままデータを入力可能です。

f:id:katamichinijikan:20190629130804p:plain

テーブルタグは個人的な好みで改行やインデントが追加されています。

A4用紙比イメージ生成

レビュー記事などを書く時に、商品のサイズをわかりやすく伝えるために、身近なものとの比較をすることがあります。

「A4用紙と比べてこれくらいの大きさです」

「はがきと比べてこれくらいの大きさです」

とか。

 

そんな時に実物の写真を撮るのも、わざわざ画像を作るのも面倒くさいです。

そこで、比較画像を自動的に生成して使っていました。

 

使い方は簡単。

横と縦の長さ(mm)を入れるだけ。

比較画像に商品名を追加したければ、任意で入力してください。

文字サイズが大きすぎる・小さすぎる場合には100%から変更可能です。

f:id:katamichinijikan:20190629131117p:plain

プレビュー画面は入力内容を変更すると都度反映されて視覚的にわかりやすいです。

大きなものだと画面から溢れてスクロールが大変ですが、そんなに極端に大きいものや小さいものはA4用紙と比較しないでしょうから良しとしています。

 

「A4用紙比イメージを生成する」を押下すると、画像データが下に表示されます。

ダウンロードしてもいいし、そのままコピーすれば大抵のブログサービスはそのまま貼り付けられます。

はがき比イメージ生成

A4用紙のはがき用紙版です。

使い方も全く同じ。

 

 

BLOGTOOLS : https://blog-tools.jpn.org/

▼IT系の転職なら

▼誰かにプログラミングを教えてみませんか?

▼釣り具の宅配買取なら