NativeScript に関する記事が増えたので、まとめページを作成した。

目次

1. NativeScript に関する記事
   1. セットアップ〜チュートリアル + α
   2. ページ遷移関連
   3. データの 保存/読み出し
   4. プッシュ通知(Firebase)
   5. カメラ
   6. フォトライブラリ
   7. QR コード/バーコード
   8. 生体認証(FaceID, TouchID, Android 指紋認証)
   9. アイコン/スプラッシュスクリーン
   10. API Request, ファイルアップロード
   11. Application Lifecycle
   12. ListView
   13. 輝度(明度/明るさ)の調整
   14. その他/Tips
   15. UI
       1. スクロール
       2. FontAwesome(アイコンフォント)
       3. ボトムタブバーによるナビゲーション
       4. Android で上下中央寄せ
       5. border
       6. ActionBar
       7. Dark Mode, Dark Theme
       8. iOS Status Bar
       9. アニメーション
       10. DatePicker, TimePicker
       11. Skeleton Screen
   16. デバッグ
   17. ビルド/リリース
2. NativeScript 参考リンクなど
   1. 公式ドキュメント
   2. サンプル集
   3. プラグイン集
   4. NativeScript + Vue について
   5. NativeScript-Vue
   6. UI 関係
      1. 使用可能なプロパティなど
      2. テーマ
      3. Plum UI Kit
      4. テーマビルダー
      5. レイアウトの練習
      6. Tips
   7. テスト関係
   8. Sidekick
3. その他

NativeScript に関する記事

セットアップ〜チュートリアル + α

• NativeScript-Vue でネイテイブアプリの開発(チュートリアル + α)

ページ遷移関連

• NativeScript で履歴をクリアしつつページ遷移

データの 保存/読み出し

• NativeScript でデータの 保存/読み出し

プッシュ通知(Firebase)

• NativeScript + Firebase でプッシュ通知

カメラ

• NativeScript でカメラの利用(写真の撮影)

フォトライブラリ

• NativeScript で フォトライブラリの 画像や動画 を参照

QR コード/バーコード

• NativeScript-Vue で QRコードの読取り
• NativeScript, JsBarcode でバーコードを 生成/描画

生体認証(FaceID, TouchID, Android 指紋認証)

• NativeScript で生体認証(FaceID, TouchID, Android 指紋認証)

アイコン/スプラッシュスクリーン

• NativeScript で アイコン/スプラッシュスクリーン を 生成/設定

API Request, ファイルアップロード

• NativeScript でファイルのアップロード(multipart/form-data)
• NativeScript の API Client サンプル
• NativeScript で非 SSL サイトへのリクエストを許可

Application Lifecycle

• NativeScript の Application Lifecycle について

ListView

• NativeScript で ListView の表示を強制的に更新する(主に iOS)

輝度(明度/明るさ)の調整

• NativeScript でデバイスの輝度(明るさ)を制御する

その他/Tips

• NativeScript で adamwdraper/Numeral を使って toLocaleString
• NativeScript-Vue でページ読み込み後にページ移動やダイアログの表示
• NativeScript-Vue で次入力欄にフォーカスする方法
• NativeScript 外部ブラウザでリンクを開く
• NativeScript でプラットフォームごとにファイルやプロパティを切り替え
• NativeScript で入力範囲外タップでキーボードを非表示にする
• NativeScript でアプリのバージョン情報などを取得
• モバイルアプリの強制アップデートに関する調査メモとアイデア

UI

スクロール

• NativeScript でスクロールを可能にする

FontAwesome(アイコンフォント)

• NativeScript で FontAwesome(アイコンフォント) を使用

ボトムタブバーによるナビゲーション

• NativeScript でボトムタブバーによるナビゲーション
• NativeScript でアイコンフォント付きボトムタブバー

Android で上下中央寄せ

• NativeScript Android で文字を上下中央寄せ

border

• NativeScript で border の設定

ActionBar

• NativeScript でアクションバーのカスタマイズ
• NativeScript で ActionBar/ActionItem に FontAwesome(アイコンフォント)
• NativeScript で ActionBar を非表示にする

Dark Mode, Dark Theme

• NativeScript で Dark Mode, Dark Theme 対応

iOS Status Bar

• NativeScript で iOS Status Bar の情報が表示されない場合の対応方法

アニメーション

• NativeScript でアニメーション

DatePicker, TimePicker

• NativeScript で Locale を意識した DatePicker/TimePicker
• NativeScript で davecoffin/nativescript-modal-datetimepicker を使って DatePicker/TimePicker

Skeleton Screen

• NativeScript で Skeleton Screen を表示

デバッグ

• NativeScript のデバッグ方法

ビルド/リリース

• NativeScript アプリのビルド・リリース手順

NativeScript 参考リンクなど

公式ドキュメント

• NativeScript Documentation

サンプル集

• Samples - NativeScript Marketplace

プラグイン集

検索しづらい

• Plugins - NativeScript Marketplace

NativeScript + Vue について

• NativeScript with Vue.js - Introduction - NativeScript Docs
• Overview - NativeScript & Vue.js - NativeScript Docs

NativeScript-Vue

• Introduction - NativeScript-Vue

UI 関係

使用可能なプロパティなど

• Styling - NativeScript Docs

テーマ

公式で用意されているテーマ

• Theme - NativeScript Docs

Plum UI Kit

有志によるカスタムテーマ、各種プラグイン利用

• Introducing the Plum UI Kit for NativeScript
• rdlauer/plum: Plum UI for NativeScript

テーマビルダー

画面を見ながら配色や文字サイズなどを変更可能

• NativeScript Theme Builder

レイアウトの練習

ブラウザ上でレイアウトの練習問題を試せる

• Learn NativeScript Layouts - A tool for learning cross-platform iOS and Android layouts with NativeScript

Tips

border のショートハンド

• Per-Side Borders in NativeScript CSS

以下のような指定が可能

1
2
3
4

Label {
  border-color: red green yellow orange;
  border-width: 1 2 3 4;
}

テスト関係

• How do you test NativeScript apps? – NativeScript
• Unit Testing - NativeScript Docs

Jest を使うサンプル

• How to set up unit testing in NativeScript Vue | Bryan Lee

Sidekick

• NativeScript Sidekick - your faithful companion for app development

その他

API Request のサンプル実装時に便利

• JSONPlaceholder - Fake online REST API for developers

関連記事

• JavaScript で URL のクエリパラメータを操作する方法
• Twitterデータの tweet.js を読み込んで全ツイート履歴を表示するツール「tweet.js loader」を作った