Home Posts filed under webデザイン
ラベル webデザイン の投稿を表示しています。 すべての投稿を表示
ラベル webデザイン の投稿を表示しています。 すべての投稿を表示

2018-06-29

|

AIの民主化進む

AIの民主化

「AIの民主化」勢いがすごいね。
この間連休の予定があったからなんとなく旅館のサイトをサイト(sight)していたら、こちらの旅館について詳しくはAIに聞いてねっていうチャットボットが出てきた。
チャットボット=質問を入力するとAIが自動返信してくれるやつ
AIってもうこんなに普及してるんだとか感心して、ちょっと調べてみたら、すでにフリーのチャットボット用ツールが結構色々出ていた。面白そう！
ってなわけで早速自分でもチャットボットを作ることにしてみた。

まずは良さげなツール探しから。

Repl-AI
NTTドコモ × インターメディアプランニング

Watson Assistant
IBM

Azure Bot Service
Microsoft

Dialogflow（英語）
Google

Amazon Lex
Amazon

上記はどれも作成するだけであれば無料で出来そうです。
Repl-AI以外はクラウドサービスを使用しているので、公開して運用するには従量課金になるようです。
今回実用化の予定はないので、極力お金をかけずに構築しますよ。自由研究（笑）


悩みました！３日間くらい。
特にWatsonとAzureで悩みました。

ちなみにWatsonはアメリカのクイズ番組で人間に勝利したことや、白血病患者の病名を見抜いたことなどで有名。AI分野の中心的存在かと思いきや、IBM自体はWatsonのことをAIではなく、コグニティブコンピューティング（人間を支援する存在の意）と呼ぶのだそう。
AIというと人間のように振舞うことを期待されると思われるが、そうではなく、人間の活動を支援するための技術である、という思想には賛成出来る。

対してAzureは女子高生AIりんなのエンジンであることで知られています。

AzureにはQnA MakerというAPIがあって、質問と回答のセットをサイトの「よくある質問コーナー」などから読み取って自動でデータベース化してくれたり、そのデータベースに手動で追加したり編集したりが簡単に出来る。これが使いやすそうで良いんだけど、質問の回答にさらに質問が被さって来た時にどう対応させることが出来るか、とか、雑談にどの程度対応することが出来るのかなかなかイメージが湧かず。

ユーザー：仕事って面白い？
こちら：面白いよ！
ユーザー：どうしてそう思う？

↑みたいなパターンの時に「質問の意味がわかりません」って機械的なメッセージが流れるとつまらないよなーと。

Watsonはデモやチュートリアルがかなり詳しくわかりやすく載っていたので、この辺りの疑問にある程度答えをくれて、具体的に開発する際のやり方や完成までの道のりを想像することが出来ました。

よって開発ツールはWatson Assistantに決定！

学生が就職活動をする際に会社の業務のことなどを先輩社員に質問することが出来る、会社説明会などでよく見かける「先輩に質問コーナー」のAI版を作ることにしました。

次回へつづく！
Next:チャットボット作成＝キャラクター作成

Read More

2017-07-20

|

【Blogger】挿入した画像を表示させない方法

Facebookなどにbloggerの記事を共有する際、bloggerの記事中に画像が入っていればfacebookの方で自動的にサムネイルを取得してリンクと一緒に画像も表示してくれますよね。

これが、画像が記事中に挿入されていない場合、もしくは動画のみが挿入されている場合には、取得するべき画像がないので、共有した時に文字だけの表示になってしまいます。

私のブログ「ヒバリとカタツムリは歌をうたう」がそうなのですが、ブログの記事中には動画のみを貼付けています。

でも、facebookなどに共有する時にもサムネイルとして意図した画像を表示したい！

そんな時にはこちらの方法で解決しちゃいましょう。


1. 「テーマ」→「バックアップ/復元」でバックアップを取り、「HTMLの編集」ボタンを押します。

input, textarea { 
のすぐ前に
.hdn{ 
   display:none; 
} 
と記入し、変更を保存。

記入する場所はここでなくとも良いのですが、メディアクエリに巻き込まれないよう、CSSの記述が始まってなるべく早めの所がいいでしょう。
「hdn」の部分は任意の文字です。

2. 投稿の作成画面にて、サムネイルで表示させたい画像を挿入します。（記事の一番最後などでいいと思います）


3. HTMLの編集モードへ切り替えます。
画像を挿入した辺りに、
<img border="0"
という記述が出来ていると思いますので、そのすぐ後に半角でスペースを入れ、class="hdn"
と入力します。

変更を保存したら以上です。

いかがですか？
挿入した画像が表示されなければ成功です。
見えていなくても画像自体は存在していますので、facebook、その他のSNSなど、共有する時には画像がサムネイルとして取得されるでしょう。

Read More

2017-03-31

|

【blogger】シンタックスハイライトはprism.jsで

prism.js
今話題のprism.jsをブロガーに実装するやりかた。

CDNを使います。
こちらのサイトからもって来ました。
https://cdnjs.com/libraries/prism

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-highlight/prism-line-highlight.min.css' rel='stylesheet'/>

の3行を</head>のすぐ上へ

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-highlight/prism-line-highlight.min.js'/>

の3行を</body>のすぐ上へ

それぞれ、2行目と3行目はプラグイン部分なので、行番号表示と特定行ハイライトが必要なければなくてOK。

記事中は
<pre class="line-numbers" data-line="4,9-10"><code class="language-markup">内容
</code></pre>

のように、<pre><code></code></pre>で囲みます。
line-numbersは行番号表示、data-lineはハイライトを指定します。
language-markupのmarkupの部分が言語指定です。

ちなみに、上記のコードもprism.jsで表示しています。
きれいに表示出来て気に入っているのだ。
Read More

2017-03-28

|

【blogger】トップページに動画のサムネイルが表示されない

【blogger】トップページのサムネイル

通常、記事中に画像（image）を入れると最初の1枚が自動的にトップページにサムネイル表示されると思います。
これを画像ではなく、動画、今回はyoutubeの埋め込みコード（iframe）を記事中に入れても、トップページのサムネイルに表示されないよー、ということがあったので、解決法？？のようなものを備忘録的に記録。

まず、こちらのサイトを参考にしました。

動画サムネイル画像に再生アイコンをCSSで上乗せして何かそれっぽくする方法

んで、youtubeのサムネイルを取得する、はこちらのサイトもわかりやすいので参照
YouTubeの動画サムネイル取得＆ブログへの貼付けの方法

上記２つの参照記事は、youtubeの動画が埋め込みコードだと表示が遅いので、youtubeのサムネイルを取得して画像として表示し、動画のページへリンクさせよう、という内容になっています。

これだー！と。

そもそも画像であれば問題なくブログのトップページに表示されるわけです。

これに加えて、トップページのサムネイル画像からもリンクで動画に飛べば完璧。

という訳で、元々のテンプレートでは

<head>内
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;

 if(img.length>=1) {
  imgtag = '<img src="'+img[0].src+'" class="pbtthumbimg"/>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

<body>内
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
</b:if>


だったのものを、
<head>内
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var atag=div.getElementsByClassName("ytlink");
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
　　
 if(img.length>=1) { 
  imgtag = '<a class="ytlink" href="'atag'" target="_blank"><img src="'+img[0].src+'" class="pbtthumbimg"/></a>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}


と書き換え、

記事中に
<div class="separator" style="clear: both; text-align: center;">
<div class="ytlinkbox">
<a class="ytlink" href="https://www.youtube.com/watch?v=動画のID" target="_blank"><img alt="動画のタイトル" border="0" class="ytimg" height="240" src="https://img.youtube.com/vi/動画のID/0.jpg" title="動画のタイトル" width="320" /></a>
<a class="ytgray" href="https://www.youtube.com/watch?v=動画のID"><img border="0" src="再生ボタンの保存先" /></a>
</div>
</div>


と、リンク先のアドレスを　a class="ytlink"　で指定します。

すると、なんということでしょう！！


トップページに、取得したyoutubeサムネイル画像が表示され、動画ページへリンクもされましたが、ついでにyoutubeの埋め込み動画（iframe）までトップページに表示されちゃいました。

あれ？？


どうやら、変更した<head>内の9行目に、<a>タグを追加していることが関係しているようなのですが、どうしてそのような動作になるのか、パソコンの画面とにらめっこした所で、私の足らない頭では理解出来ませんでした。

。。。まあ、便利なのでそのままでいっか。

結局youtubeのサムネイルを取得するのはやめて、埋め込みのまま表示することに。
速度より見た目を重視しました。

ちゃんちゃん。

完成したトップページはこちら
ヒバリとカタツムリは歌をうたう

Read More
登録: 投稿 (Atom)