はてなブックマーク

今年、Logic Appsに「QnA Makerコネクタ」が追加されました。 QnA Maker API とは、 Microsoft が提供する Cognitive Service に仲間入りしたサービスで、質問と答えのリストかFAQ形式のWebページから、ノンコーディングでQ＆A BOTを自動で生成してくれるサービス。 このコネクタ使ったら1行もコード書かずにLINE版お問い合わせチャットボットとか作れるんじゃないの？って思ってまして、試してみたらホントにできましたわ！という話。 あまりの簡単さに正直震えましたｗ チャットボットを採用したい！というお話は最近良く聞くのですが、ゼロからガッツリ構築となると費用も時間もかかるし本当に意味あるの？みたいな疑問もあったり…なので、まずはこの方法で簡易的なものを試してみてはいかがでしょうか？ というわけで、手順は以下。 事前準備 事前に Logic

この記事は Cogbot Advent Calendar 13日目のエントリーです。 12/11（月）に「【ウェブ セミナー】あなたもサーバーレスデビュー。Logic Appsで作るノンコーディング ワークフロー開発」というウェビナーを担当させていただいただきました。 その中で紹介した「お問合せメール対応を効率化（Cognitive Services × Logic Apps）」という、Cognitive Servicesを使って業務改善を考える方法をお話したので、どういった仕組みになってるか＆ポイントなどをまとめておきます！ 想定するシナリオ 今回は以下の状況を想定してみました。 Webサイトにお問い合わせがある（一般的な企業サイトや小売ECサイト） 自動返信メール機能無し カスタマーサポート部署のようなものはない メール対応は通常業務の合間に随時対応 本来であれば、上記の4つの処理を随

前回「Dropboxに画像をアップロードするだけ！画像のパス・alt属性が入ったHTMLを自動生成する方法。」という記事を書いたのですが、これは該当部分のHTMLソースコードを出力させるまでを試したものでした。 Logic AppsにはFTPコネクタがあるので、Webページ用のHTMLがうまく生成できれば自動でアップロードまで試せそう…というわけで、今回は完全にWeb制作者視点で通常使うツール（DropBox・FTP）でどこまでできるか？を試してみました、な話。 結果的に、画像をアップロードすると自動でWebページをアップロードできました！（ただし力技…） 今回やったこと 上記のようなHTMLテンプレートにDropBoxにアップロードした画像（Web用にリサイズしたサイズ）とalt属性、テキストを自動で入力し、Webサーバーにアップロードします。 人の手でやるのはDropBoxに画像とテキ

色んなとこから要望いただいたので、今回もMicrosoft系アイコンのベクター版作ってみました。 公式からダウンロードできるバージョンが「Microsoft CloudnEnterprise Symbols v2.6」なので、その中からAzureに関連が深い「CnE_Cloud」フォルダ内の画像をベクター形式にしています。 ◆Microsoft CloudnEnterprise Symbols V2.6 VisioやPNGのアイコン、利用規約のDownloadはこちら。 http://www.microsoft.com/en-us/download/details.aspx?id=41937 これまで通り、利用規約は公式サイトで確認をお願いします。 Microsoft CloudnEnterprise Symbols（v2.6）をベクター形式にしたよ 現在公式からDLできるアイコンセットの

友人たちとの悪ふざけがキッカケで「ラクして質問に答えるBOTを作るにはどうしたらいいか？」ってなりまして、試してみたかったMicrosoftのサービスである「QnA Meker」と「Azure BOT Service」を利用してみました。 「QnA Meker」は日本語対応できてないかな？って思い込んでたんですが、実際に試してみると結構対応できてました！しかもノンコーディングで手軽にBOT作成ができてイイ感じだったので手順メモ。 悪ふざけの内容はさすがに表に出せないので（おそらくいろんなとこから怒られるｗ）、変わりに弊社サービス「マイソースファクトリー」のヘルプページの内容を使ってお問い合わせBOTを作成し、WebページにBOTを組み込んでみます。 QnA Mekerとは？ Microsoftが提供するCognitive Serviceに仲間入りしたサービスで、質問と答えのリストかFAQ形

今回やったこと 仕組みは非常に単純。 「BacklogTicket-kun」というLINEアカウントを作って、そこにメッセージを送るとBacklogにチケットを起票する、というもの。 今回はノンコーディングで楽チンするのが目的なため、Webhookは使わず前回同様「メールによる課題登録」を使いました。 さて、LogicAppsはコネクターをつなぐだけで色々機能を追加できるので今回はBacklogにチケットを起票するだけでなく、 日本語以外のメッセージが投稿された場合、日本語に翻訳してチケットを起票する チケットの起票が完了したらLINEメッセージを返す SlackにLINEからチケットの起票があったことをお知らせ を追加しています。 LogicFlowを作成する 全体のLogicFlowはこのような感じ。 LINE側の設定とトリガーの設定については、以下の記事を参考にされてください～。 ト

今回はメールフォーム自体には一切触らず、LogicAppsを使って以下の機能を追加してみます。 お問合せフォームから送信された内容をBacklogに自動でチケット起票 Googleスプレッドシートにお問合せ一覧を作成 送信者に自動返信メールを送信 Slackにお問合せがあったことを通知 コード書ける方ならチョチョイとできるかもですが、書けない勢がこの内容を後付しようとすると手間も費用もかかると思うのですが、LogicAppsを使えばコネクターを5つつなぐだけで実現可能！しかもノンコーディングでサクッと作れます。 とうわけで、手順をメモ。 今回やったこと このような形になります。 今回はGmailにお問合せメールが届くものを想定しています。（コネクターがあるのでOutlookに置き換えてもいいかと） 前提条件 メールフォームについて ユーザーからのお問合せメールに対しての動く仕組みになるので

「Office Lens」はすごく便利なんですけど、目的の画像を探すのに1枚1枚見ていくのは手間だなーって個人的に思ってまして「Googleスプレッドシート内で単語を検索→画像URLクリックで画像を見られる」ができたらいいなと。 今回は、Office Lensで撮影した書類画像をOneDriveにアップロードし、Computer Vision APIで画像内のテキストをOCR化、画像のURLとOCR化したテキストをGoogleスプレッドシートにリスト化してみました。 Googleスプレッドシートの準備 以下の項目を入れたGoogleスプレッドシートを作成します。スプレッドシートの名前もわかりやすいものがよいかと。 ファイル名 画像URL ファイル内容（テキスト） BLOBストレージの準備 OneDrive内の画像をコピーするBLOBストレージを準備します。 設定はこのような形で。BLOBス

Web制作時、alt属性（画像の代替となるテキスト情報）の書き方について悩んだことはないでしょうか？アクセシビリティの観点からもキチンと写真の状況を適切に説明する文章を入れることが推奨されています。 が、私は悩むし悩んで作った割に説明できてないといった感じで、作るのがとても苦手です…。 というわけで、「alt属性の文章を自動で生成する方法ができないか？」と思って調べていたところ、Cognitive ServicesのComputer Vision API Analyze Image（画像解析）を使えばできるんじゃないか？と思ったので試してみました。 今回もLogic AppsのComputer Vision API Analyze Imageコネクターを利用するのでノンコーディングです！ 今回やったこと ちなみに、Cognitive ServicesのComputer Vision API

Cognitive Services APIの1つである「Computer Vision API」コネクターがついにLogicAppsで公開されました！ これまではComputer Vision APIのOCR (光学式文字認識：画像に含まれる文字列をテキストデータとして抽出) 機能を利用するにはプログラミングが必須だったのですが、このコネクターを利用すると、たった3ステップ、しかもノンコーディングで実現できてしまうという。 そんなお手軽さでどこまでできるのか！？が気になったので試してみました、な話。 ちなみに、Logic Appsを利用する場合はAzure管理ポータルからポチポチ作成できるので、特別な知識などはいりません。（直感でできるのがすごい） 結果的に、びっくりするくらいの簡単さで読み取り精度がかなり高い仕組みができました！ 今回やったこと 図解するとこのような感じ。 Dropbo

WebサイトでSSLを利用した上に高負荷対応も考慮した構築にするとWeb的に結構なお値段になりますが、Azure CDNを利用するとびっくりするくらい安くSSL対応の高負荷対応サイト（しかもWordPress利用）が構築できるんでは？みたいのを見かけまして、本当かどうか試してみました～。 CDNなので頻繁に更新が発生するサイトとしては不向きですが、WordPressサイトにすればプラグインでお問い合わせフォームを作ることができますし、ユーザーに問合せをしてもらいたいキャンペーン用のLPページ的な使い方だったらイケるのではないかと。 ちなみに今回の価格にはドメイン・メールサービス・Azure CDN・WebApps（WordPress）のお値段全て入っておりますｗ 事前準備 今回の方法を試すため、最低限以下のものを準備する必要があります。 ドメイン メールアドレス このあたりはお手軽にサクッ

サービスを運営するときにSNSなどの投稿の感情分析（ネガティブ・ポジティブ）ができれば便利だなと思うのですが、コードが書けない人間からすると実現は難しいかなぁと…。 以前、「Twitterのポジティブな内容のツイートをslackに通知する」というLogic Flowを作成したことがありますが、このときは顔文字を判定してネガティブかポジティブを判定しました。 これは顔文字が入っていないツイートは対象外なので「投稿した文章の感情分析をやる方法」でいい方法ないかな？とLogic Appsを眺めていたらCognitive Services Text Analyticsコネクターがあるのを思い出し。 今回はCognitive Services Text Analytics（センチメント）を使い、ノンコーディングでツイート内容の感情分析して、一覧をGoogleスプレッドシートに書き出すLogic Fl

弊社の個人スケジュールはOffice365の「予定表」で管理しています。 ですが、個人的には昔からGoogleカレンダーを使っているし自分のスケジュールを会社のスケジュールに入れるのは皆に忍びないというか何というか…なので、ポチポチと手動で個人スケジュール管理してるGoogleカレンダーに入れてたんですが、コレで何が起きるかというと「入力忘れ」が結構起きる…。 実は結構、プライベート予定ではブッキングを起こしておりました…（土下座） 何かいい方法無いかなーって思ってたら、Logic AppsにOffice365とGoogleカレンダーのコネクターがあることに気づき、連携試してみたらうまくいったのでやり方をメモ。 これでブッキング起こさなくなる！…はず。たぶん。 今回やること 会社のスケジュール（Office365の予定表）に登録すると、自動でGoogleカレンダー（個人用）にもスケジュール

Azure App Service WebApps内で利用できる「MySQL In App」が発表されました！（まだプレビューですが） というわけで、WordPress＋MySQL In Appをざっくり試してみたのでメモ。 結論から言うと、個人的には一般的なレンサバの「簡単インストール」的なサービスよりラクで簡単だなぁと感じました！ MarketPlaceからだと爆速＆お手軽にWordpressサイトが構築できる 今回はMarketPlaceを利用してWordpressサイトを構築します。 [新規] ＞ （MARKETPLACE）[Web ＋ モバイル] ＞ （すべて表示）[Wordpress]をクリック。 「MySQL In App」を選びます。 まだプレビュー版ということで、注意事項が出ているのでよく読んでおきましょう。 （運用環境を意図したものではないこと、スケールしないこと） 「

これまで最新版としてMicrosoft系アイコン「Microsoft CloudnEnterprise Symbols v2.3」をベクター形式にしたものを配布したのですが、「v2.41が出てる」とまたもや工藤さんにお知らせいただきまして。 そして今回はいつものPNG形式だけでなくSVG形式も配布になっているのですが、やっぱりベクター形式は無かった…（白目）

制作現場で素材のやり取り（写真やpsd・aiデータなど）の容量の大きなデータをやり取りする場合、今はDropboxやOneDriveなどのオンラインストレージサービスを使うことが多いと思います。 さてMicrosoft AzureのBLOBストレージの機能をうまく使えば、「特定の人たちの間で一定期間、データの共有やアップロード・ダウンロードができる」自前のDropboxやOneDriveのような仕組みを作ることができる、というのをお聞きしたので今回はそれを実際に試してみました！ SAS（Shared Access Signature）を利用する Azure BLOBストレージは容量無制限なので、この機能を他人と共有できれば自前でDropboxやOneDriveのような仕組みを作ることができます。 しかしながら、Azure BLOBストレージを使うにはアカウント キーが必要になってきます。ア

Azure WebAppsをプレビュー用で使う場合、基本的に作成したWebサイトのURLを知らせなければ関係ない人がアクセスしてくることは稀だと思います。 が、短期間であれば問題ない場合でも、そこそこの期間になるとGoogleのクローラーが来てインデックスしてしまったりも考えられるので、念には念を入れて「ベーシック認証」をかけたい場合もあるのかなと。 今回はプレビュー用に利用するときに「ベーシック認証」をかける必要に迫られましたので、色々調べて設定したことを忘れる前にメモ！ Azure WebAppsでは「.htaccess」は使えない 一般的なレンタルサーバーでベーシック認証をかけたい場合、「.htaccess」を使うと思います。 Apacheを使ったWebサーバーだったら「.htaccess」が使えるのですが、Azure WebAppsはApacheではないので「.htaccess」で

サイト制作をするとき、本公開前は一般公開したくないけどクライアント確認は必要だから「デモサイト」を作って構築する場合があると思います。 「デモサイト」でサイトを構築した場合、ファイルや画像を本番サイトのサーバーにアップロードしなおしたり、動的コンテンツがある場合は正常動作しているかテストしなおしたりと手間がかかるな、と個人的に常々感じておりました…。 （サーバーが違ったりすると、たまに動的コンテンツが動かなくなるとかあるし） これ、Azure WebSitesの「ステージング（新しい展開スロットの追加）」を使うことで「デモサイトと本番サイトをクリック1つで入れ替えできるようになった」とお聞きし、「なにそれ試したい！」ということで実際に試してみました！ 今回は「新しいポータル」でも試してみたのですが、ちょっとわかりにくかったので通常のポータルの方でレポートします。 ステージング（新しい展開ス

Azure WebSitesは1分程度でWeb構築環境を簡単に作れたりとWeb制作に携わる人間としてはホントに便利だなぁと思っているのですが、実際に使うにあたって「バックアップ機能」がありがたい！と感じました。 Azure WebSitesを使う場合はバックアップを有効にしておくのがオススメなので、方法をメモっておきます。 Azure WebSitesのバックアップ機能について サイトは止まらない（稼働中のまま）バックアップを取る「ホットバックアップ」です。 また専有モードは50GBありますけど、バックアップが増えていったら容量を圧迫するのでは？という点も心配無用。 バックアップデータはAzure Storageに格納されていきます。 なので、大元の容量には影響がありません。（Azure Storageは容量無制限なので） Azure WebSitesのバックアップ方法 今回はテスト用に作

Webサイトを構築する場合、必須になってくるメールフォーム。 Azure WebAppsを利用してWebサイトを構築するとき、メールフォームはWordPressなどのCMSを利用する場合はプラグインが利用できますが静的サイトのときはちょっと方法を考えないといけません…。 というわけで、今回は静的サイトの構築時に使えるメールフォームをMicrosoft AzureとSendGrid APIを利用して作成してみました。 入力内容の確認ページやサンクスページヘの遷移、自動返信メールなどの機能は入れていない基礎的な動作のみのメールフォームですが、やり方をまとめておきます。 メールフォームのファイル構成 今回のメールフォームに使用するファイルは以下。 contact.html send_mail.php contact.js ファイル構成とPHP、JSの機能はざっくりこんな感じ。 contact.j

Webサイトのデータをサーバーにアップロードする場合、通常のWeb制作者であればFTPを使うことが多いと思います。（最近はGit使う人も増えたとは思いますが） FTPでのんびり該当ファイルの削除＆アップロードをしてもよいのですが、ファイル数が多かったら思いのほか時間がかかる作業だったり…。 というわけで、今回は便利と聞きつつ実際に使ったことのなかった「kudu（クーズー）」を試してみました。 「Kudu」とは、Azure WebAppsで利用されているデプロイエンジンとのこと。

これまではAzureへのアップロード（デプロイ）にはFTPを利用してきましたが、Gitを使うこともできます。 結構「AzureってGit使えないの？」と聞かれることがあるので、手順をまとめておきます！ 私自身、コマンドに馴れていないのもあるので、今回は「SourceTree」と「Bitbucket」を使いました。 一度設定してしまえば、基本的にはSourceTreeでPushをするだけでAzure側にデプロイできるようになるので、馴れればFTP操作よりラクかなとｗ まずは「Git」について Gitはコマンドで使うこともできますが、コマンドに不慣れな場合はGUIツールを使った方が馴染みやすいかなと個人的には思ってます。 GUIツールは色々ありますが、AzureにはBitbuketを使ってデプロイすることができるので、Bitbuketを提供しているAtlassian社のSourceTreeがい

改ざん検知の方法 今回は2つのPowershellスクリプトとWebジョブ＋scheduler＋外部SMTPを利用します。 2つのPowerShellスクリプトの役目はこんな感じ。 CreateHashDbは「DBを作るとき実行する」 IntegrityCheckは「定期的に実行する」 図解してみると、このようなイメージになります。 改ざんされていないファイル群のハッシュを作成し保存し、定期的に現在のハッシュデータを比較して相違があればメールを送信。 これでサイトの改ざんを検知します。 今回の設定は全てクラシックポータルで行います。 外部SMTPはMARKETPLACEのSendGridを利用する 外部SMTPが必要となるので、今回はMARKETPLACEで提供されているSendGridを使ってみました。 今回のスクリプトの修正で必要な情報は赤枠部分（接続情報）をクリックすると表示されます

9月にMicrosoft系アイコン「Microsoft CloudnEnterprise Symbols v2.22」をベクター形式にしたものを配布したのですが、「v2.3が出てる」と工藤さんにお知らせいただきまして。 いやぁ～次が出るの早かったなぁ…（白目） ◆Microsoft CloudnEnterprise Symbols V2.3 VisioやPNGのアイコン、利用規約のDownloadはこちら。 http://www.microsoft.com/en-us/download/details.aspx?id=41937 というわけで。 今回も「Microsoft CloudnEnterprise Symbols v2.3」のベクター形式を、前回と同じくeps形式、PPTX形式で作成しましたよ！（もう若干意地…） Microsoft CloudnEnterprise Symbols

このブログの記事でも紹介することがありますが、最近Azure関連で構成図を作る機会がちょくちょくありまして。 ちなみにMicrosoftから公式でアイコンセットが提供されています。 ◆Microsoft CloudnEnterprise Symbols http://www.microsoft.com/en-us/download/confirmation.aspx?id=41937 ですが、ベクター形式ってないんですよね…。私が見つけきれてないだけかもですけど（汗 自分が使う分はチマチマとベクター形式を作ったりしてたんですが、シルバーウィークにもなりましたし「どうせなら全アイコンベクター形式にしてやるわ！！」ってなりまして、作りました。 軽い気持ちで初めたんですけど、全２１３個ありまし…た…。（吐血） Microsoft CloudnEnterprise Symbols（v2.22）をベ

アクセス解析の定番といえばGoogleアナリティクスですが、デフォルトだと「ページ」はURL表記なので「どのページなのかわかりにくいなー」と思いませんか？ これ、「検索と置換フィルタ」を利用することで「URL表記にページ名（ページタイトル）を追加」することができるんです。 検索と置換フィルタ 検索と置換フィルタは、一致したパターンを別の文字列に置き換える場合に使用します。検索と置換フィルタでは、フィルタ フィールドを指定し、検索する表現と置き換える表現を設定する必要があります。検索する表現は正規表現で指定する必要がありますが、置き換える表現は任意のテキストを指定できます。 ビューとは？ 以前は「プロファイル」と言われてましたが、現在は「ビュー」に変更になっています。（今更感） 「アナリティクス設定」画面も定期的に見ないとダメですね…。（反省） 「フィルタをかける前には加工しない【プロファイ

以前「Visual Studio Codeを使ってみた感想」という記事を書いたのですが、このときはsassがうまくいきませんでした。 sass対応してないのかな？と思っていたんですが、キチンと対応しているとのこと。（コンパイルも可能） なんでできないんだろう？と思ったら「Yeomanが入っていることが前提」だというを知り、まずはYeomanのインストールとか環境設定から…という展開となりました。 正直ホントにハードル高すぎたんですけども「Visual Studio Codeでsassのコンパイルまでできるようにする設定」手順をまとめます。（ちなみにWindows7環境です） 「Visual Studio Code」のアップデートをしておく Visual Studio Codeは6月3日にアップデートが発表されています。 それより以前にダウンロードしている場合、アップデートしましょう。 Vi