みなさん、こんにちは! 第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 形式でも出力できる...
みなさん、こんにちは! 第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 側で...
皆さんこんにちは! 今週は electron を使ったデスクトップアプリを作ってみようと思います! ソースコードはこちらになります! https://github.com/engclass-z/member_allocator 作ったものの紹介 今回は、複数人をいい感じにグループ分けしてくれるデスクトップアプリを作りました! 自分は結構イベントを運営したりすることがあるのですが、参加者を何回かチーム分けするときに、重複しないように分けたりするのが毎回手でやってると大変だったので、ツール化して楽するためのツールとなります。 使い方は簡単で、参加者一覧に一行ずつ参加者名を書いて、何人ずつのチームに分けたいかを入力するだけ! 自動的に2回分、可能な限り重複が起こらないように割り振った結果を表示してくれます。 なぜデスクトップアプリとして作ったかですが、屋外の wi-fi がない場所でも動かせたり、excel がない PC でも動かせたり、などを考えると、インストールだけしておけばいつでも動かせるというのがメリットとして大きかったためです。 作り方 今回は TypeScript × React × electron でデスクトップアプリを作成しています。 UI 部分は React で、ベースのロジックは TypeScript で作成しています。 本当はうまいロジックを組めたら良かったのですが、あまり賢いアルゴリズムを実装できなかったので、何度もリトライしてその中で一番理想的な分け方を採用する、というちょっと力技で実現しました。 最後に 今回は electron を用いたグループ分けデスクトップアプリを作っていきました。 今後の発展として、3回目以降の組分けも自動でできたり、参加者のステータス(性別や年齢、出身、その他)などでよりよいマッチングが行えるようなロジックなども作っていければと思います。 今回作った物自体はすごくシンプルなものですが、今後より複雑なものを作ったりするための土台はできたので、より使い勝手の良い、いろんなデスクトップアプリを作っていきたいと思います!
みなさん、こんにちは! 第9回の168(いろは)プロジェクトでは、YouTubeのキーワードフィルターを開発しました! 今回はありそうでなかったツールの開発を行いました。 何のために作ったのか? 開発理由はシンプルで"好みではない動画を見ないため"です。 ・事前に特定のキーワードが引っかかる動画は見たくない ・最近まで見ていたジャンルだけど今は見たくないのにおすすめ動画として出てくる ・検索したら近しいジャンルだけど見たくない動画も検索に引っかかる という様にYouTube のおすすめ機能が進化し、アップロードされる動画数も多くなったが故に様々な形で好みではない、または出来れば見たくない動画に遭遇することが増えた気がします。 そんな時にキーワードフィルター出来ればいいのにと思う様になりました。 もちろん見たくない動画を発見したらアカウントブロックしたり試聴を避ければ良いのですが、切り抜き動画の出現等で一つのアカウントをブロックしても、更に別のアカウントで似た様な動画が流れたりすることが多くなった様に感じます。 (切り抜き動画も面白い場面だけをサクサク見れるので時間効率という点では有難いのですが、似た様に動画を前にも見たなという気持ちになることも増えた気がします。) そんな悩みを解決したい! フィルター機能に近しい機能は多々あるがこれだ!という機能は公式にない! 無いなら作っちゃえばいいじゃん! というのが開発のきっかけになります。 今回の機能の使い方 ソースコードはhttps://github.com/engclass-z/youtube_word_filterになります。 こちらの README をご覧ください。 試してみる際は、自己責任の範囲で利用してください。 技術的な話 今回はブラウザ拡張機能と Charles を用いて API レスポンスを操作することでキーワードフィルタ機能を実現しています。 Chrome 拡張機能として実装する場合、基本的にはブラウザから投げられる API のレスポンスに対して何か作用することは難しいですが、今回は background で動く service worker として、debugger の機能を用いて実現しました。 YouTube から動画一覧取得時に実...
みなさん、こんにちは! 第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 形式でも出力できる...
みなさん、こんにちは! 第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 側で...
皆さんこんにちは! 今週は electron を使ったデスクトップアプリを作ってみようと思います! ソースコードはこちらになります! https://github.com/engclass-z/member_allocator 作ったものの紹介 今回は、複数人をいい感じにグループ分けしてくれるデスクトップアプリを作りました! 自分は結構イベントを運営したりすることがあるのですが、参加者を何回かチーム分けするときに、重複しないように分けたりするのが毎回手でやってると大変だったので、ツール化して楽するためのツールとなります。 使い方は簡単で、参加者一覧に一行ずつ参加者名を書いて、何人ずつのチームに分けたいかを入力するだけ! 自動的に2回分、可能な限り重複が起こらないように割り振った結果を表示してくれます。 なぜデスクトップアプリとして作ったかですが、屋外の wi-fi がない場所でも動かせたり、excel がない PC でも動かせたり、などを考えると、インストールだけしておけばいつでも動かせるというのがメリットとして大きかったためです。 作り方 今回は TypeScript × React × electron でデスクトップアプリを作成しています。 UI 部分は React で、ベースのロジックは TypeScript で作成しています。 本当はうまいロジックを組めたら良かったのですが、あまり賢いアルゴリズムを実装できなかったので、何度もリトライしてその中で一番理想的な分け方を採用する、というちょっと力技で実現しました。 最後に 今回は electron を用いたグループ分けデスクトップアプリを作っていきました。 今後の発展として、3回目以降の組分けも自動でできたり、参加者のステータス(性別や年齢、出身、その他)などでよりよいマッチングが行えるようなロジックなども作っていければと思います。 今回作った物自体はすごくシンプルなものですが、今後より複雑なものを作ったりするための土台はできたので、より使い勝手の良い、いろんなデスクトップアプリを作っていきたいと思います!
みなさん、こんにちは! 第9回の168(いろは)プロジェクトでは、YouTubeのキーワードフィルターを開発しました! 今回はありそうでなかったツールの開発を行いました。 何のために作ったのか? 開発理由はシンプルで"好みではない動画を見ないため"です。 ・事前に特定のキーワードが引っかかる動画は見たくない ・最近まで見ていたジャンルだけど今は見たくないのにおすすめ動画として出てくる ・検索したら近しいジャンルだけど見たくない動画も検索に引っかかる という様にYouTube のおすすめ機能が進化し、アップロードされる動画数も多くなったが故に様々な形で好みではない、または出来れば見たくない動画に遭遇することが増えた気がします。 そんな時にキーワードフィルター出来ればいいのにと思う様になりました。 もちろん見たくない動画を発見したらアカウントブロックしたり試聴を避ければ良いのですが、切り抜き動画の出現等で一つのアカウントをブロックしても、更に別のアカウントで似た様な動画が流れたりすることが多くなった様に感じます。 (切り抜き動画も面白い場面だけをサクサク見れるので時間効率という点では有難いのですが、似た様に動画を前にも見たなという気持ちになることも増えた気がします。) そんな悩みを解決したい! フィルター機能に近しい機能は多々あるがこれだ!という機能は公式にない! 無いなら作っちゃえばいいじゃん! というのが開発のきっかけになります。 今回の機能の使い方 ソースコードはhttps://github.com/engclass-z/youtube_word_filterになります。 こちらの README をご覧ください。 試してみる際は、自己責任の範囲で利用してください。 技術的な話 今回はブラウザ拡張機能と Charles を用いて API レスポンスを操作することでキーワードフィルタ機能を実現しています。 Chrome 拡張機能として実装する場合、基本的にはブラウザから投げられる API のレスポンスに対して何か作用することは難しいですが、今回は background で動く service worker として、debugger の機能を用いて実現しました。 YouTube から動画一覧取得時に実...