任意の診断を埋め込める！JavaScript診断ウィジェット

みなさん、こんにちは！ 第4回となる168（いろは）プロジェクト、今回は TypeScriptを使って webサイトに埋め込みできる診断ウィジェットを一週間で作りました！ これだけだとイメージがつかないので、以下のサイトのマッチングアプリの診断機能をイメージしてもらうとわかりやすいかなと思います！ 参考: https://jsbs2012.jp/matchingapp/review/mami0016.html 何のために作ったのか？ 今回作成した診断機能自体は、いろんなサイトに埋めこまれているものの、 調査した範囲だと、iframe での埋め込みか、自作（特にライブラリを利用とかはせず、自分達でプログラム・ロジックを書いている）しているものが多い印象でした！ ただ、自分でプログラムを書くとなるとどうしても工数が取られます。。 Webサービスにおいては、一見別々の機能でも内側のコードは同じ！みたいな話って結構ありまして、大体同じ機能は共通化して使いまわせるようにしてしまおう というのがこの手の問題の主流の解決策です。 そんな感じで、いろんな人が使いまわせる診断ツールライブラリを作ってしまおう というのが今回の168プロジェクトでの第4回の作成物です！ 今回の機能の使い方 ここでは実装した機能の説明と実際に使用するためのソースコードをご紹介します。 今回実装した機能は以下の2点です。 ・JSからライブラリを呼び込んでHTML内に埋め込み、色やデザイン、配置、画像を利用側である程度カスタマイズできる ・選択肢、その数、及び選択結果の表示をカスタマイズできる 比較的誰でも利用しやすいように整備してありますので、プログラミングを始めたばかりの方でも使えると思います。 ソースコードはこちらの URL からご利用ください。 https://github.com/engclass-z/embed_diagnose ご使用の際はこちらの README をご覧の上、自己責任の範囲でご利用ください。 実際に利用している様子はこちらになります。 試しに、オススメのお茶が何かを診断するウィジェットを埋め込んでみました！ 技術的な話 今回は React と TypeScript を用いて、esm 形式でも umd 形式でも出力できるようにしてあります。 利用側は .js / .css をロードするか、もしくは ESModule として読み込むかを選択できます。 その後、window.EmbedDiagnose(...) で、...の箇所にカスタマイズするパラメータを指定して利用します。 詳しくは github のサンプルコードをご覧ください。 最後に 今回は「HTMLに埋め込める診断ウィジェット」を作成しました。 npm パッケージ、umd で配布できる形式で何かを作った経験がそれほど多かったわけでは無いので、今回は良い経験が出来ました。 こういったライブラリを作る実装の土台が出来たので、これから先もなにかこういったライブラリの作成は行っていきたいと思います。 もしこれから先このライブラリを拡張していくのであれば、まずはドキュメントの整備、次にデザイン調整やカスタマイズ可能な項目の追加、そしてより柔軟にカスタマイズできる仕様に作り直したいと考えています。 翌週以降もどうぞよろしくお願いいたします！

2022年4月30日

はやくGmailに返信したい！GASを使ってメール自動返信

  みなさん、こんにちは！ 第3回となる168（いろは）プロジェクト、今回は Google Apps Script（GAS）を使って Gmail が届いたら自動で返信出来る機能を一週間で作りました！ 何のために作ったのか？ ・同じ内容のメールを何通も送るのは面倒。 ・直ぐにレスポンスをしないといけないけど常にメールを確認するのは大変。 Gmail を利用する人なら一度は抱いたことのある悩みだと思います。 メールの返信というのは大切ですが、意外に大変ですし面倒なため精神的な負担もかかります。しかし、仕事となればレスポンスの速さを求められますし、とりあえず返信はしないといけないですよね？ とはいえ、返信する内容もある程度決まっているしせめて自動で送れるようにしたい。 出来ればメールの相手によって送るメッセージを使い分けてくれると有り難い。 そんなツールがあれば、仕事をより効率的にまわせそうです。 そんなわけで今回は、お問い合わせフォームからメールが届いたときにメールをパースして自動で返信してくれる機能を作成してみました。 今回の機能の使い方 ここでは実装した機能の説明と実際に使用するためのソースコードをご紹介します。 今回実装した機能は以下の2点です。 ・Gmail で受信したメールの本文をパースして、自動返信できる機能 ・返信する件名や本文も利用者がカスタマイズできる機能 メールを自動返信させるために必要となる土台となる機能を実装しました。 比較的誰でも利用しやすいように整備してありますので、プログラミングを始めたばかりの方でも使えると思います。 ソースコードはこちらの URL からご利用ください。 https://github.com/engclass-z/gas_mail_replier ご使用の際はこちらの README をご覧の上、自己責任の範囲でご利用ください。 技術的な話 今回は google 製の clasp と TypeScript を用いて実装を行いました。 Apps Script の Web エディタ上で直接 gs ファイルを書いてもよいのですが、コード補完が使えなかったり、バージョン管理できなかったり、型情報でコードの安全性を守れないので、使い慣れたエディタで書くために clasp を導入しました。 最後に 今回は Google Apps Script（GAS）を使って Gmail が届いたら自動で返信させる機能を作っていきました。 今回の機能は便利で時間短縮や効率アップが望めるので、この記事を読んでくださった方も是非一度使ってみてください。 今回も一週間という期限を設けてサービスを作るという条件下で作成したので、ここまでの機能の実装になりましたが、時間があれば ・件名や本文をもっとわかりやすく GUI で変えられるようにする機能 ・本文に対して動的な変数を組み込める機能 の2点の実装もやりたかったです。 期限を設けて開発するというのは、制限されることも多いですが限られた時間で何ができるかを考えて実践するということを高速で回せるのでおすすめです。作ってみたい機能がある方は是非期間を設けて実践してみてはいかがでしょうか。 今後も作ってみたい機能を1週間で作っていくので、次の記事もまた読んでくださいね！  

2022年4月23日

ろくでもないYouTube動画コメントを書き換える！Chrome拡張「DisBlock」開発

みなさん、こんにちは！ 第2回となる168（いろは）プロジェクトですが、本格的に何かを作るのはこれが初めてになります。 まずは手始めに、前々から作りたかったChrome拡張を一週間で作ってみることにしました！ 何を作った？ 私自身、普段からよくYouTubeで動画を見たり、時々ですが動画投稿したりしています。 動画はもちろん、コメント欄も鋭いボケやツッコミがあり、本編とセットで見て楽しんだり応援コメントを見て励みにしていたりしています。 しかし中には誰かを貶めたり、スパムURLが貼られてあるようなろくでもない Dis コメントがあって、なんとかして見られないようにできないかと考えていました。 もちろん公式の機能としてブロックなどはあるのですが、いたちごっこになってしまって結局完全に対応しきるのは難しいです。 あとはちょっと心無いコメントでも、せっかく投稿してくれた方のコメントの内容を勝手に変えたり消してしまうのはいかがなものか？とも思いました。 …だったら逆に、コメントを消さないなら、心のダメージを消そう！という発想に至りました！ そう、同じコメントでも「誰がコメントしたか」で受ける印象はだいぶ違うものです。 「バカ」と言われても、おじさんに言われるか美少女に言われるかで受け取り方は全然違います。（むしろ嬉s） というわけで、今回は「指定した文がコメントに含まれていたらアイコンとユーザ名を変える」Chrome拡張「DisBlock」を作りました！ どうやって使う？ ソースコードはこちらにありますhttps://github.com/engclass-z/disblock こちらの README をご覧ください。 試してみる際は、自己責任の範囲で利用してください。 技術的な話 今回は TypeScript と React + styled-components で Chrome 拡張を作成してみました。 YouTube ではコメント欄は inview で遅延読み込みされるされるため、定期的に DOM 監視し、コメント欄が見つかったら処理を開始するようにしています。 DOM 要素の特定には ID と class を利用しているため、YouTube 側でこのあたりの命名に変更があったらロジック変更する必要があります。 最後に 今回はYouTube動画コメントの投稿者アイコンと名前を差し替えられるChrome拡張を作っていきました。 このプロジェクトでは一週間という期限を設けてサービスを作るということを大事にしているのでここまで作りましたが、時間があれば・もっとインテリジェンスに置換対象コメントを検出できるようにテキスト解析を行う・複数の置換パターンを登録できるようにするなどもやりたかったです。 また、別動画に移ったときに表示がおかしくなるバグや、クロスドメイン制限に引っかかったときに画像読み込みの挙動がおかしくなるバグなどもあるので、このあたりも直したいたいと思っていました。 しかしこだわり始めるとどこまでもやってしまいそうなので、やはり期限を区切ってサービスを作るという試みはやってよかったと思いました。 Chrome拡張を作る土台はできたので、次にまた別の拡張機能を作るときははこれを元にもっよりと便利なものを作ろうかと思います！

2022年4月16日

いよいよ始動！168(いろは)プロジェクト！！

こんにちは！ 2022年4月から、新しく168（いろは）プロジェクトなるものをスタートさせました。 168（いろは）プロジェクトは、IT系のサービスをひたすら開発してリリースし続けていく活動になります。企画立案から実装開発、世の中への公開までを1週間（168時間）以内に行い、それを年間で合計52回繰り返していくという内容です。 現在は数人でプロジェクト運営をしており、週替りで別々の複数メンバーがサービス作成を行っていく予定です。毎週どのようなサービスを作ったのかは、毎週の担当者がこのブログで公開していきます。 作るものに特に制限は無く、自分たちが作りたいものなら、WEBサービスやスマホアプリ、PCソフトウェアなどのアプリケーション、ちょっとした便利スクリプトまで何でもありの予定です。ただしスマホアプリなどは審査等で時間がかかる場合があり、そういったものを作ったときは公開まで1週間で終わらせるのは難しいため、このブログで製作紹介するまでを1週間で行うことにしています。 技術的にチャレンジングなものというよりも、『みんなにオモシロイと思ってもらえる』『実用性が高い』『使ってみたくなる』など、実際にそのサービスを楽しく運営していけるようなものを考えて作っていくような活動にしたいと思っています。 もちろん1週間で完成度が高い状態で作り切るのは難しいため、目指すところとしては『完成度50%、スピード感100%』になります。リリースしてみて反響の大きかったものは後日改めて追加開発するかもしれませんが、まずはとにかくワンアイディアに特化したサービスを数多く作っていき、世の中に出す、ということを重視して活動していきます。 記念すべき第一回となる今回ですが、サービスを作る前に、作ったものをアウトプットできる場所、後々まで残しておける場所が必要だったので、手始めにこのサイト自体を作成してみました。技術的には wordpress を使って作成し、まだ特別なことはしていないですが、来週からはこのサイトで自分たちの制作物を毎週紹介していきたいと思います！ なぜこのプロジェクトを始めようと思ったか ITの分野では常に新しい技術が生まれては消え、新陳代謝のスピードが非常に早くなっています。なので技術者は常にアンテナを張って勉強を続ける必要があるのですが、勉強する上で一番効率が良いやり方が『実際に手を動かしてなにか作ってみる』ということだと考えています。 モノを作る中で技術が必要になるからわからないことを調べる。 それを繰り返していくことが勉強の一番の近道であると思っているのですが、普通に生活しているとなかなかモノを作る、という経験を積むことができないので、思い切ってこういったプロジェクトを始めて、否が応でもなにかモノを作る場を設けることにしました。 また、技術だけを追い求めても頭でっかちになってしまうのではないか、と思ったので、作るもののアイディアやその見せ方などにこだわるために『リリースする』というところに重きをおいています。 せっかく作ったなら多くの人に興味を持ってもらいたい、そのためにはどうすればよいか。そういったことを考える機会も普段なかなかないので、このプロジェクトの中に織り交ぜて活動していきたいと考えています。 今はどのような人たちがプロジェクトに属しているか 現役でプログラマーとしてバリバリ活動している人から、今まで全くプログラムを書いたことがない人までまちまちです。 技術力や作りたいものは人それぞれですが、皆に共通しているのは『創りたいものがある』という点です。 まだモノを作ったことが無いというメンバーは、プロジェクトを通してサービスを作りきるという経験を積むことができ、実践的な勉強を行える。 一人でサービスを作るのが大変というメンバーは、このプロジェクトで知り合った他のメンバーと一緒に切磋琢磨しながら開発ができる。 現役技術者のメンバーは、自分の持っている力を試してみたり、サービスを作る中で新しい技術に実践的に触れることができる。 皆が皆、自分の中にやりたいことがあり、その実現に向けて動いている。そんなメンバーが集まって活動しています！ 最後に まだまだ始めたてのプロジェクトですので、これからいろいろな製作を行っていく中で、プロジェクト自体の進め方や作るものの趣味・嗜好が変わっていくかもしれません。 ですがその中でも、『創りたいものを自らの手で創り上げる』という思いは、これからもずっと変わること無くこのプロジェクトメンバー全員の根幹にあり続けます。 決して簡単な活動ではないと思いますが、その先に自分たちの創りたいものが形となって待っていると思うと、今からワクワクが止まりません！ これから先もどうぞよろしくお願いいたします！！

2022年4月8日