個人開発

個人的に開発して使っていたToDoリストをたくさんの方に使ってもらうにはどうしたらよいかと考えた結果、Chromeの拡張機能として提供しようと思い至りました。 元々はサーバサイドをPHPで書いていたので、JSに書き直してChrome拡張機能で使えるようにしました。 Chrome拡張機能「Simple ToDo List」を開発してみた 「Simple ToDo List」の概要 やることをシンプルに管理できるToDoリスト。 簡易的なメモ帳としても使うことができます。入力するだけで保存できたり、優先順位を変更したり、ワンクリックで削除できます。 「Simple ToDo List」のChrome追加はこちら。 https://chrome.google.com/webstore/detail/simple-todo-list/jnaoknjcfadocekoodfgdpjkkopahjkj?hl=ja&amp;gl=JP 「Simple ToDo List」の使い方 ＋(追加ボタン)を押下して、タスクを生成します。 タスクを入力します。タスクの内容は入力する段階で保存されます。 タスクの優先順位を変更する場合は、↑↓ボタンを押下します。 タスクを削除する場合は、ゴミ箱マークをクリックします。(削除時に確認ダイアログは出ないので注意) Chrome拡張機能のDBってどうなってるの？ Chrome拡張機能開発をしようと思った時に疑問に思ったのがDBってどうなってるんだろう？ということです。ということでChrome拡張機能のDBを調べてみました。 sync Chromeにより同期されるストレージエリアです Chromeにログインしていれば、どのパソコンからでもアクセスすることができます。 local ブラウザ内に閉じたストレージエリアです. パソコン単位で保存しているため、例えログインアカウントが一緒でも異なるパソコンからではアクセスできません。 managed ドメイン管理者によって設定され、読み取り専用のストレージエリアです。 以上の3つが、Chrome拡張機能のDB(ストレージエリア)となっています。詳しくはこちらの公式サイトに記載されています。 https://developer.chrome.com/extensions/api_index 本拡張機能では制限の少ないlocalを使用しました。 localストレージ内を全て削除する場合は [crayon-631ade52394af333470154/] localストレージ内に登録する場合は [crayon-631ade52394b6669745692/] localストレージ内から取り出す場合は [crayon-631ade52394ba855261629/] 以上でlocalストレージエリアを操作することができます。 本拡張機能が呼び出された際に、ストレージに格納されているデータが入ったDOMを生成します。 [crayon-631ade52394bd878515800/] タスクの登録処理は以下のように行なっています。 [crayon-631ade52394c1496238190/] Chrome拡張機能を登録するのに必須なマニフェストファイルの書き方 Chrome拡張機能を登録するのに必須なマニフェストファイルの書き方をまとめておきます。 マニフェストファイルには、拡張機能名や説明文、アイコン画像などの設定を記述します。 manifest_version マニフェストファイルのバージョンを示しています。最新版は2なため、2を使用しています。 version 拡張機能のバージョンを示しています。1から4つまでの数値で区切ることができます。 また、拡張機能を更新する際には必ずバージョンが上がってなくてはなりません。 name 提供する拡張機能の名称です。45文字までですが、short_nameで略称を定義することもできます。 description 拡張機能を紹介する説明文です。132文字までです。 browser_action ・default_icon アドレスバーの右に表示するアイコンを指定します。サイズは19pxが推奨されます。Retina用に38ピクセルのアイコンも用意しておきます。 ・default_title アドレスバーの右に表示するアイコンにカーソルをかざした時に表示されるツールチップです。省略するとname が使われます。 ・default_popup アドレスバーの右に表示するアイコンをクリックした時にに表示されるポップアップのHTMLファイルを指定します。 icons 拡張機能のアイコンです。Chrome Web Storeやファビコンなどに使われます。また、画像の形式はpngが推奨されています。 permissions 特定のAPIを使うためにあらかじめ設定する必要があります。 どんなAPIがあるのかは以下から確認できます。 https://developer.chrome.com/extensions/declare_permissions 以上を踏まえた上で、本拡張機能のマニフェストファイルは以下のようになりました。 [crayon-631ade52394c5223686075/] 以上で、Chrome拡張機能の登録準備は完了です。 あとは、Chrome ウェブストアからデベロッパーダッシュボードにアクセスし、登録手続きをするだけです。最初に登録する場合は5$払ってデベロッパー登録する必要があります。 具体的な手順は以下の記事が参考になりました。 https://qiita.com/otchy/items/e29bf2e377c5b7ddc2f7 思った以上に簡単にできるので、また何か思いついたら作って登録してみようと思います。 「Simple ToDo List」のChrome拡張機能追加はこちら。よかったら使ってみてください。 https://chrome.google.com/webstore/detail/simple-todo-list/jnaoknjcfadocekoodfgdpjkkopahjkj?hl=ja&amp;gl=JP

Docker + Node.jsのアプリにPM2を導入する

【LINE謎】LINEで遊べる謎解きの作り方と開発方法まとめ

Vue.jsでChrome拡張機能開発してみた【シンプル電卓】

【Chrome拡張機能】シンプルなToDoリスト・メモ帳を開発してみた