【10. 挫折中のため飛ばします】初心者による初心者のためのInternet Computerチュートリアル備忘録その１０「Make inter-canister calls」

※今回は途中で挫折してしまったため、エラーのまま途中終了となっていますこと予めご了承ください。理解が深まり、エラーの解決策が分かり次第、再度取り組んで記事化させていただきます。

プログラミング（C#）歴半年の私でりおてんちょーが、Internet Computerチュートリアルを進めていく上で

分かりづらかったところ
めっちゃ調べたところ

などを、備忘録としてこちらにまとめていきます。

今回は、10個目のチュートリアル「Add a stylesheet 」についてです。

これからInternet Computerチュートリアルを始める方に、少しでも役立てていただけると幸いです。

また、この記事ではMacでの作業となりますこと、あらかじめご了承ください。

デモをダウンロードする

1. ターミナルシェルを開き、インターネットコンピューターのサンプルプロジェクトに使用しているフォルダーに移動します。
クイックスタートで「ic-projects」というフォルダを作り、私はそこにまとめるようにしたので、『cd ic-projects』で移動します。

ちなみに『pwd』コマンドで、現在の場所が確認できますよ。（pwd：print working directoryの略）

2. 『git clone https://github.com/dfinity/linkedup.git』のコマンドで、linkedupリポジトリのクローンを作成します。

3. 『cd linkedup』のコマンドで、linkedupリポジトリのローカル作業ディレクトリに移動します。

4. 『npm install』のコマンドを実行して、ノードモジュールをインストールします。
めちゃくちゃエラーが出たので、『npm audit fix』を打ちましたが、相変わらず「npm ERR!」がたくさん表示されます。

いろいろ調べた結果、私の場合はnodeのバージョンが原因でした。
私は最新版の16.3.0を使っていたのですが、執筆時点で推奨版の14.17.1に変更したらエラーがなくなり、以下のような画面が表示されるようになりました。

参考サイトはこちらに挙げておきますので、少しでもご参考になれば幸いです。
nodeの推奨版を確認
 NodebrewでNodeをインストールする
 ［Mac］npm install エラーへの対応（初心者向け）

ここで『npm audit fix』を実行します。

※私の場合は、コマンドラインの指示に従って『npm audit fix --force』コマンドも実行しました。

5. テキストエディターでdfx.jsonファイルを開き、dfx設定がインストールしたdfx実行可能ファイルと同じバージョン番号であることを確認します。

うーん、おそらくピンク線のことを言っているのだと思われますが、コマンドラインからそのような出力は見当たりませんでした。。

一旦保留して先に進めますので、分かる方いらっしゃったらこっそり教えてください。。

ローカルネットワークを開始します

『dfx start --background』のコマンドを実行して、ローカルコンピューターでインターネットコンピューターネットワークを起動しましょう。

--backgroundオプションを使うことで、ローカルコンピューターで別のターミナルシェルを開かずに済みますよ。

ちなみに、いつもは起こらないのですが『dfx start --background』のコマンドでエラーが起こりました。

「先程のピンク線の部分が"0.6.22"になってるよ〜。"0.7.1"にしてよ〜。」

という感じだったので、手動でピンク線部分を"0.7.1"に変更したら通りました。

先程の、『dfx設定がインストールしたdfx実行可能ファイルと同じバージョン番号であることを確認します。』というのは、これを指していたのかな？

詳細は不明なので、詳しい方に教えていただきたいのですが、とりあえず通ったので一旦このまま進めていきます。

キャニスターIDを登録する

1. 必要に応じて、プロジェクトディレクトリにいることを確認してください。
「linkedup」にいることを確認しましょう。

2. 『dfx canister create --all』のコマンドを実行して、プロジェクトの一意のキャニスターIDを登録します。

デモプロジェクトをビルドしてデプロイする

ビルドしてデプロイしていきます。

1. 必要に応じて、『pwd』コマンドを実行して、プロジェクトディレクトリにいることを確認します。
/linkedup にいればOKです。

2.『dfx build』のコマンドを実行して、LinkedUpキャニスターを作成します。
うーん、エラーが起こってしまった。。

「ERROR in ic:canisters/linkedup Module build failed: UnhandledSchemeError: Reading from "ic:canisters/linkedup" is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "ic:" URIs.」

URIを処理するために追加のプラグインが必要になる場合があります。とのこと。

ちょっとよく分からないので、このチュートリアルは途中やめという形にさせてください。。

また理解が深まってこのエラーの解決策がわかったら、再度取り組んで記事化させていただきます。

次はこちら（↓）をどうぞ
初心者による初心者のためのInternet Computerチュートリアル備忘録その１２「Add access control with identities」