年: 2019年

フロントサイドの開発はjQueryを使っていたため、新しくJavaScriptのフレームワークを使ってみたいと思い、シンプルにやりたいことができそうなVue.jsを選択しました。 せっかくやるなら何か成果物を作りたいと思い、Chrome拡張機能を作ることを目標に勉強を進めていきました。ということで冬休みの時間を活用して、Vue.jsで電卓を作ってみました。 作ったもの シンプル電卓機 Simple Calculator https://chrome.google.com/webstore/detail/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E9%9B%BB%E5%8D%93%E6%A9%9F-simple-calculator/dlaggloabkagldkpfckkejkhjhcimkih?hl=ja&amp;gl=JP 難しく簡単すぎない電卓を作ってみることにしました。仕事でもたまに使うので個人的に有用なツールになると思いました。 ポップアップで電卓機能を使えるため、すぐに計算をしたい時にとても便利です。実際に作った後、活用しています。 Vue.jsの環境は以下の記事を参考に構築しました。 https://qiita.com/567000/items/dde495d6a8ad1c25fa43 電卓のボタン部分の実装 [crayon-676e6c2f57f8a265494758/] 電卓のボタン部分です。数字や記号押下時にそれぞれのメソッドが発動します。必要最低限の四則演算機能を実装しました。 電卓の実装 電卓の計算表示部分の実装 computedは紐づいた値が変更されると、その値に依存している全てのバインディングが更新されます。 今回の電卓の場合は、ボタンを押下する度に入力値や四則演算記号が変わるため、以下のような実装となります。 選択した数字と計算結果の数字は、計算中かどうか(inputNumberFlgフラグ)で判定しています。 [crayon-676e6c2f57f8c902921909/] 計算処理の実装 計算部分はswitch文で判定し、実行しています。 [crayon-676e6c2f57f8e208618333/] C(Clear)とCA(ClearAll)の削除処理の実装 C(Clear)ボタン押下時は選択した数字列から1つ前の数字を削除します。CA(ClearAll)ボタン押下時は全ての数字・記号を初期化します。 [crayon-676e6c2f57f8f846620326/] 電卓のデザイン 電卓のボタンはキーボードのような雰囲気にしました。クリックするとキーが押されたような動きになっています。 [crayon-676e6c2f57f90794249055/] Vue.jsで実装が完了したらビルドする 実装が完了したら以下のコマンドで、プロジェクトをビルドします。 [crayon-676e6c2f57f91974588356/] ビルドが成功すると以下のように表示されます。 [crayon-676e6c2f57f92694548527/] ビルド後、distディレクトリが作成されます。 あとはChrome拡張用にマニフェストファイルなどを追加し、zip化したら完成。今回の場合は、以下のようなディレクトリ構成になりました。 [crayon-676e6c2f57f93835116009/] imagesディレクトリにはChrome拡張機能のアイコンの画像がサイズごとに分けて格納されています。 マニフェストファイルの説明など、Chrome拡張機能登録に必要なことは以下の記事で詳しく説明しています。 https://mintaku-blog.net/chrome-todolist/ 以上、Vue.jsでChrome拡張開発をした流れを紹介しました。 よろしければ開発したシンプル電卓機 Simple Calculatorを使ってみてくださいね。 https://chrome.google.com/webstore/detail/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E9%9B%BB%E5%8D%93%E6%A9%9F-simple-calculator/dlaggloabkagldkpfckkejkhjhcimkih?hl=ja&amp;gl=JP

年: 2019年

FuelPHPのマイグレーションの作成と実行方法

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