はじめに
Vue.js プロジェクトで vue-svg-loader を使って SVG ファイルを描画する方法について整理した。
TL;DR
npm i -D vue-svg-loader
でvue-svg-loader
をインストールvue.config.js
に設定を追加xxxx.vue
でimport
してcomponents
に登録して<YourSvgIcon />
で描画
はじめに
Vue.js で FontAwesome を使う方法について整理した。
TL;DR
- npm で FontAwesome 関連のパッケージをインストール
new Vue
する前にライブラリのインポートと使用するアイコンの設定<font-awesome-icon :icon="[]" />
タグで表示
はじめに
Vue.js を使って Chrome 拡張機能を開発する方法について簡単に整理した。
前回の記事 では、Kocal/vue-web-extension
を使った Chrome 拡張機能の開発方法について調べた。が、「Kocal/vue-web-extension
では Popup Page や Options Page で Vue.js を使うもの」、つまり「メインページ(メインコンテンツ?)側では使えないもの」という結論に至った。(※自分の中では、の話)
冷静に考えて「メインページ側に使えないわけがない」と思って、どのようにすれば実現できるかについて調査した。
実際に拡張機能を作ってリリースした話 : Vue.js を使ってChrome 拡張機能を作った話(はてなブックマークのコメントを Qiita 記事内に表示) - Qiita
TL;DR
vue.config.js
を用意してvue-cli-service
でビルドすれば動作することを確認manifest.json
ではchunk-vendors.js
を先に読み込む- minify とか css preprocessor とかはまだ調べきれてない
はじめに
JavaScript のソースコードの圧縮・難読化ツールについて調べたり試したりしたので記事にまとめた。
Google chrome の拡張機能の開発で javascript-obfuscator/javascript-obfuscator を使って minify をしていたが、Google さんから「Policy 違反」と言われてしまったため、何がまずかったのかと代替できそうなツールを探した。
※2019/09/28 現在では、新しいツール(terser/terser を選択)を使って minify したソースをまだ提出していないので、もし Chrome 拡張機能の JS 圧縮について調べていてこのページにたどり着いた場合は鵜呑みにしないように注意。
TL;DR
- 2019/09 時点で使えそうなのは以下の4つ
- Chrome 拡張機能で使えそうなのは terser/terser
- 自分で管理するウェブサイトとかなら javascript-obfuscator/javascript-obfuscator が良さそう?
はじめに
Git を使った開発をしていて package-lock.json
でコンフリクトが発生した時の解決方法のメモ。
TL;DR
package-lock.json
のコンフリクトはnpm install
すれば解決できる
はじめに
PHP ファイルを Git リポジトリに登録(commit)する時に、PHP-CS-Fixer で自動整形を必須にする方法を調べた。
.git/hooks/pre-commit
でも実現できるが、できればチームメンバー内で共有したい(git clone
(してゴニョゴニョ)するだけで使えるようにしたい)ので、もう少し突っ込んで調べてみた。
TL;DR
husky
+lint-staged
+php-cs-fixer
でコミット時の自動整形を実現可能husky
を使うと、package.json
で クライアントサイドの Git hooks(pre-commit など)を利用できるlint-staged
を使うと、ファイル種別ごとにコマンドを実行できるhusky
+lint-staged
で、*.php
の commit 時にphp-cs-fixer
を実行する
はじめに
Cordova でネイテイブのダイアログを表示できる cordova-plugin-dialogs
について調べた。
TL;DR
cordova-plugin-dialogs
はネイティブのダイアログを呼び出す- タイトルやボタン名も変更可能
- 見た目の比較(
window.alert
などとの違い、iOS, Android での違い)をまとめた - 通常の
window.alert
なども考慮した Wrapper を作った- Vue.js の mixin なのでそれ以外の人は適宜修正
はじめに
Cordova で Splash Screen を設定できる cordova-plugin-splashscreen
についてまとめた。
TL;DR
cordova plugin add cordova-plugin-splashscreen
でインストールres/screen/ios
などに画像ファイルを配置config.xml
に<splash src="res/screen/ios/xxxx.png" />
を追加- デフォルトは表示から3秒後にフェードアウト
はじめに
docker-lambda
+ sharp
で画像変換する AWS Lambda Function 作ったのでそのメモ。
TL;DR
docker-lambda
+sharp
で画像変換する AWS Lambda Function 作った- せっかくなので
webp
にも変換してみた - リポジトリ: 17number/aws-lambda-resize-s3-image-sharp