こんにちは。Web3に興味があって、AIをもっと使いこなしたい中高年を応援するWeb３とAIマニアじいじのko_sanです。
iMacからMacBook Airに「クローン」したのに、Chromeでアプリが動かないよ〜！フォルダはあるのに、どうして？
それはね、まだChromeに「このアプリを使っていいよ」って許可証を出してないからだよ。実は3分あればすぐ使えるようになるんだ
えっ、コードを書いたり難しい設定が必要なんじゃないの？黒い画面は怖いよ……。
大丈夫！難しいコードは一切ナシ。マウスで数回クリックするだけだから、一緒にやってみよう！
前回の記事で、自宅のiMacにあった大切な自作アプリのデータを、GitHubを使ってMacBook Airに「クローン（コピー）」しましたね。
でも、フォルダをコピーしただけでは、まだChromeブラウザ上でアプリとして使うことはできません。
今回は、MacBook Airの中にあるGoogle Chromeに「この自作アプリを使っていいよ」と教えてあげる手順をご紹介します。
難しいコードは一切書きません。マウス操作だけで、たった3分で終わります。
これで、自宅だけでなくカフェや旅先でも開発ができるようになりますよ！
今日のゴール：Chromeの鍵を開けて招待する
普段私たちが使っているChromeには、セキュリティのために「勝手なアプリが入らないようにする鍵」がかかっています。
今日の作業は、この鍵を一時的に「開発者用」として開けて、前回クローンしたフォルダを招待してあげるイメージです。
【実践】Chromeに読み込ませる3ステップ
では、お手元のMacBook AirでGoogle Chromeを立ち上げて、一緒にやってみましょう。
ステップ1：「拡張機能を管理」画面を開く
まず、Chromeの画面右上にある「パズルピースのようなアイコン」を探してください。
それをクリックするとメニューが出ますので、一番下にある「拡張機能を管理」を選びます。
※もしパズルピースが見当たらない場合は、右上の「3つの点（メニュー）」をクリックし、「拡張機能」→「拡張機能を管理」と進めば同じ画面に行けます。
ステップ2：「デベロッパーモード」をONにする
画面が開くと、現在インストールされている拡張機能の一覧が表示されます。
ここで注目してほしいのが、画面の右上にある「デベロッパーモード」というスイッチです。
普段はOFF（グレー）になっていますが、これをクリックしてON（青色）にしてください。
すると、画面の上の方に「パッケージ化されていない拡張機能を読み込む」などの新しいボタンが3つ現れます。これが「開発者の証」です。
ステップ3：「パッケージ化されていない拡張機能を読み込む」
現れたボタンの左端にある、「パッケージ化されていない拡張機能を読み込む」というボタンをクリックします。
ファイルを選ぶ画面になりますので、前回GitHubからクローンしたフォルダ（「Documents」フォルダなどにあるはずです）を選択してください。
ここでのポイントは、フォルダの中に入らず、フォルダそのものを選択して「選択（Select）」ボタンを押すことです。
【確認】アイコンが表示されれば成功！
読み込みが成功すると、一覧の中にあなたの自作アプリのパネルが表示されます！
あとは、いつものようにブラウザ右上のパズルピースから、そのアプリを選んでクリックしてみてください。
ポップアップ画面が出てきて、期待通りに動けば大成功です。
もし動かない場合は、フォルダの中身が正しいか、GitHubからのクローンが正しく完了しているかを確認してみてくださいね。
自分の作った「翻訳日英拡張機能」が動作するか確認してみました。 英語のニュースサイトの記事を表示させた状態で、選択した英文がうまく翻訳されていることが確認できました。
まとめ：これでどこでも開発できる！
今日の作業は、以下の3ステップでした。
- Chromeの「拡張機能を管理」を開く
- 「デベロッパーモード」をONにする
- 「読み込む」ボタンで、クローンしたフォルダを選ぶ
この3ステップで、iMacで作ったアプリの魂が、MacBook Airにも宿りました。
これで、あなたのMacBook Airはただの「閲覧用パソコン」から、「開発マシン」へと進化しました。
家では大画面のiMacでガッツリ作り込み、出先ではMacBook Airで検証や微調整を行う。そんな自由な開発スタイルを楽しんでくださいね。
