マネー報道 MoneyReport

仮想通貨に特化した自作EAを公開中！仮想通貨FXでMT4&MT5を活用し資産運用中！

↑
↓

「記事紹介ジェネレーター」をバージョンアップ！色々変更可能に！

ブログ運営 開発向け
あとで読む スポンサーリンク

Webサービスを公開

サクッと作ったWebサービス「記事紹介ジェネレーター」を前回の記事で紹介させて頂きました。

「自分自身が使いたいから」

という理由で開発しましたが、折角なので皆さんにも使って頂けたらという事で公開させて頂きました(^^)v

記事紹介ジェネレーターが何が出来るのかと言うと下記の様なリンクを作る事が出来ます。

記事紹介ジェネレーター | マネー報道 Webサービス記事紹介ジェネレーター | マネー報道 Webサービス　

「リンク先のキャプチャ画像にタイトルテキスト、はてブ数」の3点セットが表示出来ます。

そして昨日公開してすぐにコメントを頂きました。

id:cardmicsさん
私はこういうのを作れないので好き勝手、書きますが、


１．サムネイル画像とテキストリンクの間がくっつきすぎているのでpadding-right:10pxくらい欲しい。
２．テキストリンクとはてブのuser数がくっつきすぎているのでここも空白が欲しい。
３．サムネイル画像の大きさを選べるようにしてくれると使いやすい。


このくらい出来るとこちらを積極的に使います＾＾。是非是非、本家を上回る作品にしてください。


確かにnofollowを付けるかどうか選べると嬉しいです＾＾ あとはtarget="_blank"をつけるかどうかも選べると、リンクを貼る人間としては100点満点なんじゃないんでしょうか？

ふむふむ。
要望事項としては・・・

【Webサービス追加仕様】

  1. サムネイル画像とテキストリンクの間を「padding-right:10px」空ける
  2. テキストリンクとはてブのuser数の間を空ける
  3. サムネイル画像サイズ選択可能に
  4. 「rel="nofollow"」の有無選択可能に
  5. 「target="_blank"」の有無選択可能に


と、まぁこの5点でしょうか。
このくらいの仕様変更はキツくないので、要望を反映し作りなおしました(^-^)/

また、オマケ機能で「作った出力コードをブログ等に貼ったらどう見えるのか？」をすぐに確認出来る「プレビュー機能」も追加してみました(^-^)v

バージョンアップした「記事紹介ジェネレーター」を御覧ください(^-^)/

記事紹介ジェネレーター | マネー報道 Webサービス

【目次】

バージョンアップした部分

大体の見え方は変わっていないです。
テキストの説明文が変わったのと、選択項目を選べるように「ドロップダウンリスト」を5個追加しました。
f:id:MoneyReport:20160517135712j:plain

ここですね。
f:id:MoneyReport:20160517135823j:plain
URLを貼り付けるテキストボックスの下にドロップダウンリストを追加しています。
左から順に「画像width」、「画像height」、「画像装飾」、「target="_blank"」、「rel="nofollow"」が選べるようになっています。
１つ１つ見てみましょう。

１．画像width

f:id:MoneyReport:20160517140156j:plain
「画像width」は画像の横幅の事で、選択肢は50ピクセル単位に50～400ピクセルまで選ぶことが出来ます。
デフォルト値は「150」ピクセル。

２．画像height

f:id:MoneyReport:20160517140342j:plain
「画像height」は画像の高さ（縦サイズ）の事で、選択肢は50ピクセル単位に50～600ピクセルまで選ぶことが出来ます。
デフォルト値は「150」ピクセル。

３．画像装飾

f:id:MoneyReport:20160517140441j:plain
「画像装飾」はキャプチャされる画像の装飾についてです。
「なし」、「影つき」、「縁つき」、「角丸め」の4つから選ぶことが出来ます。
デフォルト値は「影つき」。

４．target="_blank"

f:id:MoneyReport:20160517140712j:plain
「target="_blank"」は画像リンクやテキストリンクをクリックした時に、別のウインドウで開くかどうかを選ぶ事が出来ます。
「有り」だと別ウインドウでリンク先を開き、「無し」だと現在開いているページから移動してリンク先を開きます。
デフォルト値は「有り」。

５．rel="nofollow"

f:id:MoneyReport:20160517141411j:plain
「rel="nofollow"」はリンク先を『広告・有料リンク』としてGoogle等の検索エンジンに通知する機能になります。
「有り」だとリンク先は『広告・有料リンク』として定義し、「無し」だとリンク先は『ナチュラルリンク』として定義します。
デフォルト値は「無し」。

「rel="nofollow"」の詳しい解説については下記ブログの記事が詳しいので参考にしてください。

【有料リンク】広告（PR活動）リンクはしっかり「nofollow」をつけましょう - 検索サポーター

６．プレビュー表示

f:id:MoneyReport:20160517141442j:plain
URLを「Enter URL」に入力し「コード出力」ボタンをクリックした場合に、「Output Code」テキストエリアの下に「プレビュー表示」というタイトルと共に実際にブログ等に貼った場合の状態が表示されます。
今回のバージョンアップでかなりの細かい見た目を変更出来る様になりましたので、色々な条件で試してみたいと思うのではないかな、と。
その時に、いちいちブログ記事とかに貼って確かめて、また出力しなおしてコードを貼り直してとかって面倒だと思うので、Webサービス上ですぐに確認出来る様にしました！

画像装飾で「縁つき」とか「角丸め」とかがどう見えるのかっていうのを、直ぐに確認出来て便利かな、と♪
f:id:MoneyReport:20160517141946j:plain

と、ここまでが今回のバージョンアップで改善された部分になります。
かなり「痒い所に手が届く」様になったのではないかな、と(^-^)v

折角なのでバージョンアップ版で出力したコードで「記事紹介ジェネレーター」へのリンクを貼っておきます。

記事紹介ジェネレーター | マネー報道 Webサービス記事紹介ジェネレーター | マネー報道 Webサービス　

注意事項

Webサービスのテキスト本文にも書きましたが、

　画像heightは画像witdhの 0.5 倍 ～ 3.75 倍の範囲で設定が可能です

画像サイズが自由に選べるようになりましたが、上記の範囲を超えた設定でコード出力すると下記画像の様に「BAD REQUEST」と表示されて、待っていてもキャプチャ画像はずっと表示されませんので気を付けて下さい。
f:id:MoneyReport:20160517142043j:plain

スマホでも可能

f:id:MoneyReport:20160517142658j:plain
ちなみに、Webサービス「記事紹介ジェネレーター」はデザインにBootstrapを採用しているため、レスポンシブ対応されていてスマホで表示してもきれいに表示できます(^^)v
あまり居ないとは思いますが

「スマホでも記事紹介ジェネレーターが使いたい！」

という方も普通に使える様にしてありますので、ドンドン使ってくださいね(^-^)/

まとめ

コメントから頂いた要望を反映してみました！
まぁ簡単に作れそうだったので実装しただけで「こんな機能も追加して欲しい！」と難しい要望を挙げて頂いても対応できませんので、あしからず(^-^;
画像widthや画像heightに「この値も欲しい！」という程度なら対応できます(^^;

さらっとしか使っていないので普通にバグもあるかもしれません。
バグ報告等あればコメントやブコメにて頂ければ、簡単なバグならば修正します。
難しいバグなら放置でいこうかと(^o^;

多少は使い勝手が向上したので、皆さんもぜひ使って頂けると嬉しいです(*^-^*)v

気に入って頂けた方はWebサービス「記事紹介ジェネレーター」の下部にSNSシェアボタンを設置していますので、シェアして頂けると更にうれしいです！
f:id:MoneyReport:20160516112725p:plain

記事紹介ジェネレーター | マネー報道 Webサービス記事紹介ジェネレーター | マネー報道 Webサービス　

バグ修正対応報告（追記 2016/5/17 22:23）

Webサービス「記事紹介ジェネレーター」側へのブコメにてバグをご報告頂きました。


id:narayouさん
PCWatchのサイト入れると文字化けしちゃう

現象を確認しました。
PCWatchのTOPページは大丈夫でしたが、個別の記事ページを貼り付けると下記の様に文字化けしてしまっています(>_<)

f:id:MoneyReport:20160517221715j:plain

PCWatchのソースコードを確認します。

<!DOCTYPE HTML>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />

「charset=Shift_JIS」という事でエンコーディングがUTF-8ではなくて「Shift_JIS」になっていますね。
エンコードがShift_JISだとうまく行っていないようです(-_-;

・・・（ソース解析中）・・・

一応「Shift_JIS」にも対応できる様にしていたのですが、変換順位が下位になっているため、途中に入っている「JIS」と誤認して変換している様です。
なので変換順位をJISよりも「SJIS」の方が上になる様に修正してみると・・・
f:id:MoneyReport:20160517222232j:plain
直りました！

エンコーディングが「Shift_JIS」のサイトにも対応しましたので、ご報告まで。