🕌

Native Scriptでハンバーガーメニューのアイコンを表示する

2024/10/17に公開

Vue.js

bolt.newでAIを使ったコーディングが、できます。
https://bolt.new/

そしてXの投稿で、Native Scripitを使うことで、モバイルアプリを作ることができると知りました。
Native Scripitは、StackBlitzを使うことで、簡単にテンプレートを使ってアプリ開発ができます。
bolt.newは、StackBlitzの機能の一部です。
bolt.newで作ったプロジェクトをStackBlitzに送って、ローカルにダウンロードすることもできます。

今回Native Scripitで試行錯誤したので、記録に残したいと思います。
Native Scripitは、AngularとVueなどのフレームワークで、使うことができます。
Native ScripitでAngularを使うときは、そのまま使えるようです。
Native ScripitでVueを使うときは、チュートリアルにコマンドが掛かれていました。

ns create <project-name> --vue # add --ts if you'd like to scaffold a project with TypeScript
cd <project-name>

npm install
# or
yarn install

ns run

上記のように、プロジェクトを作るときに、--vueと指定することで、Vueで書くことができるようです。

そのためVueをインストールしなくても、良いようです。

それぞれのテンプレートは、StackBlitzで簡単に作ることができます。
https://stackblitz.com/

Android Studioでデバックするとき

Androidの実機が無い私は、Android Studioをインストールして準備しました。
Native Scripitは、JDKのバージョンが8が推奨のようです。
そのためWindows11を使っている私は、JDKのバージョン管理をするツールを見つけました。
JBangを、こちらの記事で見つけました。

インストールのコマンドは、こちらのページで知りました。
Windows Powershell:

iex "& { $(iwr -useb https://ps.jbang.dev) } app setup"

JDK8をインストールするコマンド

jbang jdk install 8

Native Scripitのプロジェクトのディレクトリで、JDKのバージョンを切り替えるコマンド

jbang jdk java-env 8 | iex

を入力すると切り替えできます。
その他インストールされているJDKのバージョンのリストを得るコマンドなどは、上記の記事で確認してください。

ウェブとモバイルでは、地図情報を得る方法が違う

ウェブページで位置情報を扱うときは、無料で使えるJavascriptで使うGeolocation API で、位置情報を取得できます。
地図は、無料で商用利用できるOpenStreetMapを使い、ライブラリは、Leafletを使うことができます。

でも、これらの方法は、モバイル今回は、Native Scriptの環境では、使えないようです。
また、mapboxも、Native Scriptでは、使えないようです。

Native Scriptで地図を扱うときは、
位置情報取得: nativescript-geolocationプラグインを使って現在の位置を取得する。
地図表示の別の方法: Webビューを使用してブラウザで地図を表示する。
がよさそうです。

新規にNative Scripitでプロジェクトを作りました。

npm install -g nativescript

ns create MyApp --vue

新規にプロジェクトを作ったのに、警告が出た

警告の内容を、調べてみました。

inflight@1.0.6
- 警告内容: inflightモジュールはメモリリークを引き起こすため、サポートされていません。代わりに、lru-cacheというモジュールが推奨されています。
- 対応策: このモジュールを直接使用している場合は、lru-cacheへの移行を検討してください。そうでない場合、他の依存パッケージがこれを使っている可能性があるので、依存関係の更新を確認してください。
source-map-resolve@0.6.0
- 警告内容: このモジュールは非推奨になりました。詳細はこちらを参照してください。
- 対応策: 直接使用していない場合は、依存関係を確認して、パッケージ全体の更新が必要か検討してください。
consolidate@0.15.1
- 警告内容: consolidateのバージョン0.15.1は非推奨です。1.0.0以上にアップグレードすることが推奨されています。アップグレードには複数の修正が含まれており、サポートも行われています。
- 対応策: 可能であれば、consolidateのバージョンを最新の1.0.0以上にアップグレードしてください。
glob@7.2.3
- 警告内容: globのバージョン7.2.3以前のものはサポートされていません。
- 対応策: 依存関係のglobパッケージを最新版に更新してください。npm update globで更新できます。
webpack-chain@6.5.1
- 警告内容: webpack-chainパッケージはサポートが終了しました。詳細については、npmサポートに連絡してください。
- 対応策: このパッケージを使用している場合は、他の代替パッケージの使用を検討するか、可能であればwebpack-chainの削除を検討してください。

全般的な対応策：

依存関係の更新: npm outdated コマンドを使用して、古くなったパッケージを確認し、npm update や npm install で更新できるか確認するのがおすすめです。
他のモジュールの確認: 警告が出たモジュールが直接使われていない場合、他の依存パッケージが古いものを使用している可能性がありますので、その場合は依存パッケージのメンテナンス状況も確認する必要があります。

この回答は、ChatGPT GPT-4oの回答を引用転載しました。

Native ScriptでFont Awesomeを使う方法

Native ScripitでVueでプロジェクトを作ると、Font Awesomeがセットされていました。
そして、テンプレートのコードの一部を引用転載しますが、

        <GridLayout>
            <Label class="info">
                <FormattedString>
                    <Span class="fas" text.decode="&#xf0c9;"/>
                    <Span :text="message"/>
                </FormattedString>
            </Label>
        </GridLayout>

このコードで、

 <Span class="fas" text.decode="&#xf0c9;"/>

のようにクラス名で、faを設定します。
そして、アイコンの文字コードは、

text.decode="&#xf0c9;"

と書きます。
私は、Felo AIなどを使ってネット検索して、Native ScripitでFont Awesomeを使う方法を調べて数時間というか数日試行錯誤していました。
でも、Native Scripitのプロジェクトの新規作成方法に従って作れば、問題なくすぐに使えたので、少し後悔しています。

f0c9は、ハンバーガーメニューのアイコンの文字コードです。
Font Awesomeのフォントサイズなどは、app.cssのコードで、確認してください。

@import '@nativescript/theme/core';
@import '@nativescript/theme/default';

// Place any CSS rules you want to apply on both iOS and Android here.
// This is where the vast majority of your CSS code goes.

// Font icon class
.fab {
  font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
  font-weight: 400;
}

.fas {
  font-family: 'Font Awesome 5 Free', 'fa-solid-900';
  font-weight: 900;
}

.far {
  font-family: 'Font Awesome 5 Free', 'fa-regular-400';
  font-weight: 400;
}

ハンバーガーメニューのアイコンを左に配置

私は、ハンバーガーメニューのアイコンをアクションバーの左に表示させるために、試行錯誤していました。
でも、このコードで、実現できました。

        <ActionBar>
            <GridLayout columns="auto, *, auto" style="padding: 0;">
                <Label class="fas" text.decode="&#xf0c9;" col="0" style="margin-left: 10;" />
                <Label text="Home" horizontalAlignment="center" col="1" style="margin: 0 auto;" />
            </GridLayout>
        </ActionBar>

GridLayoutを使うと、レイアウトを行に分割するだけでなく、カラム（列）に分割することもできます。例えば、columns="auto, *, auto"と設定すると、3つのカラムを定義しています。

auto: コンテンツの幅に合わせて自動調整されるカラム

*: 残りのスペースを埋めるフレキシブルなカラム

auto: 再びコンテンツの幅に合わせて自動調整されるカラム

この設定で、ハンバーガーメニューアイコンを左端、"Home"を中央に配置できます。コードでcol="0"と指定した部分が、最初のカラムに配置される要素、col="1"が2番目のカラムに配置される要素を表しています。

上記は、MicrosoftのCopilotの回答を引用転載しました。

アイコンの色が青の理由

今回のコードでは、アイコンが青色になっています。
コードは、ここが関係しています。

<style scoped lang="scss">
@import '@nativescript/theme/scss/variables/blue';

// Custom styles
.fas {
    @include colorize($color: accent);
}

この@import '@nativescript/theme/scss/variables/blue';は、ブルーのテーマ変数をインポートしているのです。そして、.fasクラスの中で@include colorize($color: accent);を使って色を適用しています。このaccent色が青に設定されているから、アイコンも青になっているのです。テーマ変数のaccent色を変更すれば、アイコンの色も変わります。
こちらも、MicrosoftのCopilotに質問して得た回答を引用転載しました。

アイコンの色を黒色にする

<style scoped lang="scss">
@import '@nativescript/theme/scss/variables/blue';

// Custom styles
.fas {
    color: black;  // アイコンの色を黒に設定
}

.info {
    font-size: 20;
    horizontal-align: center;
    vertical-align: center;
}
</style>

で、直接クラス名のfaに色の指定をしています。

スライドメニューのプラグインが無い

Native Scripitのプラグインのページで、スライドメニューのプラグインが紹介されていますが、インストールを試みると、パッケージが無いとエラーになります。

こちらに公式のプラグインの配布ページが、あります。
https://market.nativescript.org/
ここで、RadSideDrawerをキーワードに検索すると、複数見つかります。

使えそうなプラグインやテンプレートがあれば、使うのも良いと思います。

こちらの記事も、参考になると思います。

こちらが、インストールできます。

npm i --save nativescript-ui-sidedrawer

Native Scripitがアップデートしています。

こちらの記事を読んでください。
NativeScript 8.8 がリリースされました

プロジェクトの依存関係の更新ができるコマンドも、紹介されています。

スライドするメニューは、手強さそう

Native ScripitでRadSideDrawerのパッケージのインストールはできました。
でも、スライドの動作や表示を実現できていないです。
こちらは、引き続き勉強の課題としたいと思います。

公式の情報を見つけました。