Chrome拡張機能でブログを効率化した話 #FIXER_internship
2019-09-04
azblob://2022/11/11/eyecatch/2019-09-04-internship-Blogger-Assist-System-blog-summarization-permalink-keyward-idea-translate-000.jpg

どうもFIXERインターンシップに参加させていただいた江本恒河といいます。普段は一関で高専生をしたりしています。今日はインターンシップ期間中の活動について紹介していきたいと思います。

一日目にcloudとは何ぞやという研修と、僕たちがインターンシップ中にやる内容が発表されました。研修については他の社員さんたちがcloudについて解説していると思いますので省きます。

インターンシップの課題

体験テーマはズバリ!「FIXER Owned Media "cloud.config Tech Blog"をより広める方法」です。要は僕が今寄稿しているこのブログをより広めるプロダクトを作るということです。
広める方法なのですが、必ずしも広告に頼る必要はないようです。このブログに一番寄稿している編集長が言うには、このブログには課題が多いようです。
ブログの本数の目標として「とりあえず1000本」だったり、ブログを書いている人の割合がキャリアの長い方々ほど少なかったり、パーマリンクや画像の命名規則に合わせるのがすべて手作業だったり、といった具合です。このような課題を解決することでも、ブログの知名度向上につながるはずです。

アイデア

僕のアイデア

僕は「無限にブログをほめてくれるAIチャン」を考えました。このアイデアは、なんらかのキャラの口調でブログをほめるボットを作ることで、「褒め文をSNSで見かけた後ブログを見た人は内容を理解しやすい」、「(AIからだけど)レスポンスが必ず得られるので、ブログを書くのが楽しくなる」という2つの有用性を狙いました。これは課題を僕なりにCognitive Serviceと結びつけた結果でもあります。
しかしキャラデザから作るとなるとインターン期間では厳しいということと、そこまで主要のブロガー社員さんたちの良反応を得られませんでした。よって、一部分を同じチームの酒さんが出したアイデアに統合して開発することになりました。

統合して最終的にできたアイデア

他のメンバーからもアイデア統合して最終的にできたアイデアが「Blogger Assist System」というものになります。このアイデアは、このブログの寄稿者を助けてくれるシステムです。
まずパーマリンクの命名規則ですが、これは書いた記事の日付とキーワードを自分で抽出し、英訳したものをハイフンでつないでパーマリンクにしないといけないようです。だいぶ手間です。さらに、画像の命名規則はパーマリンクの後にナンバーをそれぞれつけるようです。数十枚あるとめんどくさい作業になります。
これらを自動化すれば、ブログ執筆時のワークフローを大幅に短縮できます。ついでにタグ候補の提案も、キーワード抽出からできるようになるので取り入れました。
もう一つ、要約文を自動で生成して文頭に追加するというアイデアが元々の酒さんのアイデアにあったので取り入れました。このアイデアは要約文が先に読まれることで、その記事を理解しやすくなるという有用性を狙いました。

実際に出来上がったもの

緑のボタンを押すと

ポップアップウィンドウが表示されます。ここにあるボタンなどで機能を実現しています。

クリックでつかんで移動できます。

解析ボタンを押すと
・要約文が文頭に追加される。
・パーマリンクが自動生成されて、URLスラッグとポップアップウィンドウに反映される。
・キーワードとその英訳が表にまとまって表示される。

のですが、スクショを撮るときにすでに作ったAPIを停止させていたので、今回は解析失敗となりました。開発中にある程度スクショ撮っとくべきだった・・・

しょうがないので、手動でパーマリンクを入れて、画像のリネームをしてみます。
リネームのボタンを押すと

こんな感じで画像を選択できます。選択すると、パーマリンク文字列+"-ナンバー"という感じでリネームされた画像がダウンロードされます。

自分たちで言うのもなんですが、めっちゃ便利だと思います。解析ボタンを押すと要約文とパーマリンクが自動で生成されて反映されるのですが、要約文はブロック一つ生成してそこに追加するので、消そうと思えば簡単に消せるし、あとでレイアウトを思う存分いじれます。パーマリンクは言わずもがなです。キーワードを抽出して英訳、ハイフンでつなぐという作業が丸々省けました。

要約とか英訳は3つほどAPIを使って実現しています。その結果をLogic AppsとFunction Appを使ってまとめ、Chromeの拡張機能に返し、Word Pressの編集ページに反映しています。

システム概要図はこんな感じ

ちなみに僕はフロント側の開発に加わりました。

まとめ

今回久々にフロントエンドの開発をして、技術は使わないと腐るんだなと実感しました。特に検索するときの語彙力です。これがないと開発できないのにだいぶ腐り落ちてましたね。この期間中、助けてくれた同じチームの田中君、メンターの方々にとても感謝しています。そしてバックエンドのほうも短い期間で予想外のクオリティになっていたので、皆さんすごかったです。要約のスクショ撮れなかったのが悔やまれる。

今後は、自分でアイデアがあったらどんどん開発して、技術を腐らせないようにしていかないとなと思いました。なんか作ったら、LT会とかでもネタになりそうですし。

最後に、インターン期間中、メンターの皆様や人事部の方々にとてもお世話になりました。ありがとうございました!