3分でChrome拡張を作ってQOLを上げる
背景
楽天市場、便利ですよね。みなさんもよく使われると思います。 我が家でも良く使われています。
PCで商品を探し、スマホで決済したい
楽天市場には、スマホアプリで決済すると獲得ポイントが+0.5倍になるというキャンペーンがあります。
こちらのキャンペーン、商品が見やすいからとPCでショッピングをしていると、ついつい決済までそのまま行ってしまい、 購入完了後の画面を見てから「スマホアプリで購入すればよかった〜〜！！！」となりがちです。
それ、拡張機能でどうにかなるのでは？
以前からChrome拡張機能を作ってみたいと思っていたため、ぱぱっと作ってみることにしました。
要件は以下です。
拡張機能を作っていく
Chrome拡張機能を作るにあたり、必要なファイル構成は以下です。
- content.js (機能自体のスクリプトを書く）
- manifest.json(拡張機能の設定ファイル) 以下を参考にしました。 https://qiita.com/RyBB/items/32b2a7b879f21b3edefc
それでは作っていきましょう！
manifest.json
{ "name": "alertRakuten", "version": "1.0.0", "manifest_version": 2, "description": "楽天市場にて、スマホアプリで決済することを促す機能", "content_scripts": [ { "matches": ["https://basket.step.rakuten.co.jp/rms/mall/bs/cartall/*"], "js": ["content.js"] } ] }
上記、適宜書くべきことを書きます。
今回注意すべきはcontent_scripts の部分。
matchesに、どのWebページで動作させたいかを書きます。
https://basket.step.rakuten.co.jp/rms/mall/bs/cartall/*
上記であれば、「cartall/ まで完全一致のURLであり、それ以降の文字列はなんでも良い」という意味になります。
これで楽天市場のカート画面で動作させることができそうです。
content.js
alert('スマホアプリから購入するんですよ〜〜');
上記manifest.jsonで記述したURLで発火するスクリプトを記述します。
「スマホアプリで購入するように！！」と促すメッセージを表示する なるべく気付きやすい形が良い メッセージ表示中は注文確定ボタンなどが押せない
今回の用件であれば、js標準のalertで問題なさそうです。
実際に動かしてみる
用意するものが揃ったので、実際に動かしてみましょう。
1) 作成したcontent.jsとmanifest.jsonを同じフォルダにまとめる
2) chrome://extensions/にアクセス
3) デベロッパーモード > ON
4) パッケージ化されていない拡張機能を読み込むを押下し、1で作成したフォルダをアップロード
上記のように、自分のChromeに自作の拡張が読み込まれれば成功です！
外部へ公開する場合
今回の拡張機能は個人利用目的のため、Chrome拡張機能ストアに公開しませんが、公開したい方は別途手続きが必要です。
動作例
無事、楽天市場の買い物かごを開いたタイミングでAlertを出すことに成功しました！ これで毎月何かを購入するたびに「スマホで買えばよかった！！」と後悔することがなくなりそうです。
編集後記
今回は初めて拡張機能を作ってみました。Chrome上で動作させるまでの手順が全く難しくなく、 特別なドメイン知識も必要としないため、開発に全リソース割くことができて素敵ですね。 また何か作ってみようと思います！
参考文献
Laravel DuskのインストールでError: Call to undefined function Facebook\WebDriver\Remote\curl_init()が出たとき
環境
- Windows10 home
- Docker Desktop (Engine:WSL2）
- Laravel 5.4
概要
こちらのサイトに沿って進めていたところ、Laravel Duskのインストール、サンプルテスト実行のタイミングで以下のエラーが出た。
Error: Call to undefined function Facebook\WebDriver\Remote\curl_init()
実行していた手順
// composerでLaravel/duskパッケージをインストール $ composer require --dev laravel/dusk:^2.0 // duskのインストール、ディレクトリが作成される $ php artisan dusk:install // ビューのテスト作成 $ php artisan dusk:make TasksIndexTest // テスト実行 $ php artisan dusk // ここでエラー発生 // Error: Call to undefined function Facebook\WebDriver\Remote\curl_init()
とりあえず上記メッセージでググってみると...
インストールしているFacebook webdriverのバージョンが古いからアップデートすると治る！という内容の
stackが何件か見つかった。
php - Call to undefined function curl_init() even it is enabled in php7 - Stack Overflow
愚直に試してみる。
// curlがあるかどうか確認 php -m | grep "curl" // 確かにない... // php-curlをインストール sudo apt-get install php7.4-curl // もう一度確認 $ php -m | grep "curl" curl // ↑ある！OK！
当初のcurl_init()がない、というエラーは解決されたであろう、ということでduskコマンドを再度実施。
$ php artisan dusk
~~~
1) Tests\Browser\TasksIndexTest::testIndex
Facebook\WebDriver\Exception\UnknownServerException: unknown error: Chrome failed to start: crashed
(unknown error: DevToolsActivePort file doesn't exist)
(The process started from chrome location /usr/bin/google-chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'
System info: host: '6864efac3a6d', ip: '172.25.0.5', os.name: 'Linux', os.arch: 'amd64', os.version: '5.4.72-microsoft-standard-WSL2', java.version: '1.8.0_222'
Driver info: driver.version: unknown
remote stacktrace: #0 0x55c6d9812959
~~~
表題の件は解消されたが、なにやら別のエラー出てる。
でもDuskは実行されたっぽいぞ！
別のエラーになったことで進んでいる実感とともに元気が出て、またエラー構文をググる。
Chrome failed to start: crashed などと言ってるから、
どうやらDuskがテスト用のChromeを開始できなかったらしい。などと雑に予測しながら。
すると巡り巡って下記のページにたどり着き...
Laravel DuskでE2Eテスト（インストール、使い方、Docker/Vagrant環境別のtipsなど）
ChromeDriverとChromeのバージョンについて php artisan dusk:install でインストールされるChromeDriverと、手動でインストールしたgoogle-chrome-stableのバージョンが合っていないとDuskは動作しません
上記の説明文とともに、自分の環境ででたエラーメッセージとそっくりなメッセージを掲載している。ほう？
とりあえず、いまgoogle-chrome-stableとやらがインストールされているのか確認してみる。
// Chromeのバージョンを確認 google-chrome-stable --version // ない
//ない ない。chrome入ってない！そりゃあ当たり前のように動くわけない。
さっきの長いエラーの中でもDriver info: driver.version: unknown って言ってたのもうなずける...
Windows上では当たり前のようにChromeがインストールされてたけど、WSL(Windows subsystem for Linux)には入ってなかった。 LinuxはデフォルトブラウザがFireFoxなので、そりゃ入ってないか。
ということで、UbuntuにChromeをインストールする方法をググってみる。
以下のサイトの内容を愚直にそのまま実行。
UbuntuにChromeをインストールする - Qiita
// 改めてchrome-stableとやらを確認 $google-chrome-stable --version Google Chrome 94.0.4606.54 // 入った！
無事UbuntuにChromeを入れることができた。 さぁ今度こそDusk実行できるか...！
$ php artisan dusk PHPUnit 6.5.14 by Sebastian Bergmann and contributors. .... 4 / 4 (100%) Time: 5.61 seconds, Memory: 12.00MB OK (4 tests, 7 assertions)
できたー！！！ 長かった...数時間かかりましたが無事フロントエンドテストの環境整いました！
後記
途中悩まされたエラーメッセージでググってみても日本語の結果があまり出なかったので、 誰かの（未来の自分の）一助になっていれば幸いです。
ローカルでLaravelプロジェクトを複数同時に立ち上げたいとき
TL;DR
やり方だけ教えてくれ！という人向け
// ビルトインサーバを立ち上げる際、--portオプションで立ち上げるポートを指定できる。 // これでポートが被らないように2つのLaravelプロジェクトを立ち上げる。 php artisan serve --port=9000 php artisan serve --port=9001
バージョン差異を勉強したかった
地道ながら経験を積ませていただいていると、 案件にて「エンハンス対応なんか頼めますかね～？」と聞かれたりすることも出てきた。
エンハンス対応・・・ここでの意味は「Laravelのバージョンアップ作業等」を指します
頼まれる仕事の範囲が増えることは大変喜ばしい。その際に必要となるバージョン間での差異を勉強するべく、
まずは自宅でいろいろ動かしてみようと思った。
バージョンを指定してLaravelをインストール
バージョンを指定して、インストールします。ここ大事。
何も指定しないと勝手に最新版が入るようになっていたはずなので注意。
// 以下記述方法 composer create-project --prefer-dist laravel/laravel "自由なProject名" "バージョン指定(5.1, 7.*など)"
// バージョン5.5でインストール composer create-project --prefer-dist laravel/laravel laravel5_5 "5.5" // バージョン7でインストール（マイナーバージョンは特に指定なし。） composer create-project --prefer-dist laravel/laravel laravel7 "7"
ちなみにバージョン指定したLaravelのインストールでちょっとだけ色々ありました。その記事は以下。
無事2つのバージョンをインストールできた！
同じディレクトリにlaravel5.5のプロジェクトとlaravel7のプロジェクトをインストールした。
ポートが衝突しないようにビルトインサーバを立ち上げる
無事プロジェクトが作成できたので、早速おなじみのビルトインサーバを立ち上げてみる。
ビルトインサーバ・・・Laravel内のArtisanコマンドで標準で持っている簡易サーバ。
が、デフォルトでは 8000ポートで立ち上がるため、同じポートで2つのプロジェクトを共存させることは出来ない。
よって、2つのプロジェクトそれぞれに別のポート番号を割り振る必要がある。
指定方法は --port オプションを使う。
$ php artisan serve --port=7999
こちらによってデフォルトの8000ポートではなく、7999ポートでビルトインサーバを立ち上げることができる。
上記の方法で、それぞれに別々のポート番号を振り...
Laravel5.5の起動画面
Laravel7.3の起動画面
無事ローカルで2つのバージョンのLaravelを起動させることができました。
7.3のほうがちょっとメニュー増えて、Laravelのどでかロゴもちょっとおしゃれになってるのね。
ビルトインサーバなのでできることは限られているけど、簡単な動作比較検証なんかでは重宝するんじゃないかと。
ComposerでLaravelをインストールしようとしたら"Could not find package laravel/laravel5.5 with stability stable."が出たとき
2つのインストール方法を試したらできた
自宅PCにLaravel環境をこさえようと、Composerでinstallしようとした。
どうせならバージョン比較なんかにも使いたいと思い、ご丁寧にバージョンまで指定してコマンドを打った。今回はバージョン5.5。
composer create-project --prefer-dist laravel/laravel5.5 laravel_project
すると、表題のエラーが出た。
[InvalidArgumentException] Could not find package laravel/laravel5.5 with stability stable.
翻訳してみたところ、
安定したバージョンを見つけられない みたいな意味らしい。
見つけられないといわれても困ってしまうので、別の記述方法を試した。
composer create-project --prefer-dist laravel/laravel blog "5.5"
こちらはLaravelDocであるreadouble.comより抜粋。 バージョン指定が後ろに来ている。
上記の方法で無事、目的のバージョン5.5をインストールすることができた。
補足
--prefer-dist はLaravelをzipで落としてくる、という指定。
デフォルトではgit cloneしてくるようになっているが、zipで落としたほうが速度が速いため、こちらがよく用いられている。
余談
余談だが、readouble.comが非公式であることをつい先日知った。
（Laravelに触れ始めてからreadouble.comに当たり前のように触れていたし...）
確かにLaravelの創始者Taylor Otwell氏が英語しか使えないので、英語のライブラリ、ドキュメントしか取り込まないと聞いたことがある。
とはいえ、母国語であり言語理解の壁がなくドキュメントを読めるのは大変ありがたい。
そんなreaduble.comはこちら。
上記のインストールコマンドもこちらに。
readouble.com
PHP8で交差型宣言が可能になる
TL;DR
PHP8.1から、以下の記法で交差型宣言が可能になる。
<?php class sampleA { private countUpClass&countDownClass $countClass; ... }
解説
上記の例で言えば、countUpClass型か、countDownClass型を受け入れる。それ以外は受け付けない変数として宣言できる。
今まではアノテーションに以下のように指定するなどの方法しかなく、PHPの自然な言語構造に組み込まれていなかった。
<?php /** @var Traversable&Countable */ private $both = null;
今回の変更によりPHPの言語構造として組み込まれることとなる。 適応バージョンはPHP8.1。
出展： wiki.php.net
目まぐるしい変化が続き、別物と捉えられることもある今回のPHP8へのバージョンアップ。ふるい落とされないようにしていきたい。
PHPでも「…」で配列を展開する
TL;DR
<?php $array_1 = [1, 2, 3]; $array_2 = […$array_1, 4, 5]; print_r($array_2); // 1, 2, 3, 4, 5
解説
PHPで配列を展開する際、今までであればarray_merge などを用いる必要があった。
その必要が無くなったとされるのが、PHPバージョン7.4で実装された スプレッド演算子 のリリースである。
これにより、配列の展開を、…$hogeArray で行えるようになった。
こちらで書くメリットとして以下が挙げられる。
- 記述量が少なくて済む
- 可読性の向上
- 関数時に比べてパフォーマンスの向上
- 関数ではなく言語構造のため
個人的にも読みやすく無駄に関数を呼ばずに済むので積極的に使っていきたい。
