未解決事件だが、実行する時のパスを src/appからにすると実行できるようになったが
なぜかプロジェクトのルートにファイルが作成されたので、そのファイルを src/app以下に置きなおした
更に、app-routing.modules.tsにて、モジュールのパスを管理しているので、そのファイルを開き正しく直した

Modalを呼び出す

とりあえず tab1にボタンを配置してそこから呼び出す事にした

tab1.page.ts

import { StreamingPage} from '../modal/streaming/streaming.page';

export class Tab1Page {
  constructor(
    private modalCtrl: ModalController,
  ) {    
  }

  async presentModal() {
    const modal = await this.modalCtrl.create({
      component: StreamingPage,
    });
    return await modal.present();
  }
}

ModalControllerモジュールをimportし
presentModalインタフェースを追加した

tab1.page.htmlは下記のようにボタンを追加した

<ion-content [fullscreen]="true">
  <div class="ion-padding">
    <ion-button expand="block" fill="outline" (click)="presentModal()">Streaming</ion-button>
  </div>

  <app-explore-container name="Tab 1 page"></app-explore-container>
</ion-content>

streamingビデオを再生させるために streaming.page.htmlに追記

<ion-content>
  <video width='950' height='700'
    src="https://devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_ts/master.m3u8" controls
    autoplay playsinline webkit-playsinline></video>

</ion-content>

これで、Modalでビデオが再生できる

Closeボタン

モーダルをCloseするにはdismissを呼ぶだけだ

ボタンを追加し

streaming.pages.html

  <ion-toolbar>
    <ion-title>streaming {{test}}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="close()"><ion-icon name="close"></ion-icon></ion-button>
  </ion-buttons>

動作をつける
streaming.pages.ts

export class StreamingPage implements OnInit {
  @Input() test: string;

  close() {
    this.modalCtrl.dismiss();
  }
  ```  
  
  
# CSS  
  
cssClass: 'app-streaming', 
  
だけではダメのようで  modal-wrapperにもCSS適用した    
このあたりはまだよくわかってない・・・  
  
globals.css

.app-streaming .modal-wrapper { width: 100%; height: 100%; display: block;
border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; }

2020-09-01

ionicをWindowsで開発し LiveReloadを行う

ionicとは？

1つのソースで、Web、Android、iOS、Windowsネイティブ等の複数のアプリを生成するハイブリッドフレームワークです
ionicの特徴としては、Typescriptで記述し、Angular(React)フレームワークを使い、ネイティブ連携にCapacitor(Cordova)を使う事つまり、HTML、CSS、JavaScriptというWebの資産が利用出来る事にあります
Vueも現在対応中とか！

インストールもnpmで行います

Windowsとの相性

公式曰く

ionicframework.com

In general, we recommend using the built-in terminals. Many third-party terminals work well with Ionic, but may not be supported. For Windows, Command Prompt and PowerShell are supported. WSL is known to work with Ionic, but may not be supported. For macOS, the built-in Terminal app is supported. Git Bash (from git-scm.com) does not support TTY interactivity and is not supported by Ionic.

ビルトインのシェルを使ってくれ（Git bash等は対応していない）
WindowsはCommandPromptとPowerShellは対応している。WSLは動くらしいけどサポートはしないよ

まあ、iOSビルドもあるし、基本的にはMacで開発するのが当然のようだ

Windowsで開発してみた

ionicでserveすると [ERROR] ng has unexpectedly closed (exit code 127). - C++幼女みやたけゆき
先日記事にかいたが、とあるnodeのバージョンでは、起動時にエラーが出るという問題にピンポイントにぶつかったが
基本的には問題なく動いた

が、ライブリロードが効かないのである！！

Ionic live reload not working. · Issue #495 · microsoft/vscode-cordova · GitHub
など、様々なページでWindowsだとLiveReloadが効かないという話が出ている

ionicの起動はお世辞にも速いといえない（私のMBPで30秒かかる）ので、これは何とかしたいものだ・・

WSL2を使ってみた

公式からはサポートしないと言われているWSLを使ってみる
私はWSL2にしているので、WSL1はどうなるかわからない

まず、Windowsパス（/mnt/c の下）でionicを実行したが LiveReloadがされない
このパスはWSLからみるとCloud9でマウントされたネットワークドライブなので
挙動に問題があっても仕方がない

次に、Linuxパス(例えば ~/ の下) でionicを実行すると LiveReloadが実行された！！
しかも ionicは10秒で起動する
とても快適な環境が構築された！

2020-08-25

ionicのチュートリアルをする

github.com

ionicのチュートリアルを空き時間に勉強している

初めての Ionic アプリ: Angular - Ionic Framework 日本語ドキュメンテーション最初なので上記の記事をみながらかいているただし、日本語化がされておらず、単純にコードをコピーするわけでなく
多少頭を使う（英語を読む）部分もあるので、一筋縄ではないが
これはこれで、多少頭を使って、単なるコピペにならないようになり
私も、記事を書くときに参考にしようと思う

だいたい一通りはわかったが、英語なのでよくわからないので
結局最後はコードをみて調べることにする

今は、iOS、Androidへのネイティブビルドまでいったが
iOSビルドをするために cocoapodsが必要であった

そういえばそんなもの、2光年前にインストールしたけど、環境リセットで消したんだった

まだ実機でのビルドはしていないが、だいたいわかってきた

2020-08-24

ionicでserveすると [ERROR] ng has unexpectedly closed (exit code 127).

ionicを起動しようとしたときに下記のエラーがでた

[ERROR] ng has unexpectedly closed (exit code 127).

nodeのバージョンは下記
node v13.3

$ node
でコンソールに入り

const uuid = require('@loopback/context').uuid

と入力してエラーが出れば、node_modules\uuid が無い

諦めてnodeを別のバージョンにすれば解決

2020-08-22

ionic frameworkを触ってみる

緊急なお仕事が入ってきまして、ionic frameworkを触っています

ionic frameworkとは

Web/iOS/Android/PC のハイブリッドフレームワークの1つです
PWAのようなWebViewではなく、完全にネイティブコードの出力を行います
いわゆる下記の仲間になります

ハイブリッド

PhoneGap（Cordova）、Monaca、Capacitor

クロスプラットフォーム

Xamarin、React Native、Flutter、Kotlin Native・・

ハイブリッドとクロスプラットフォームの違いはここでは
ハイブリッドはUIをHTML＋CSSで作り
クロスプラットフォームは専用のUIで作る事とします

ハイブリットフレームワークにした理由

スケジュールの関係から、WebデザイナーにUIを作ってもらう方がよかったからです
そのため、必然的にionicを採用することにしました

ionicインストール

インストールは非常に簡単でした
今回はAngularとCapacitorを使います
まずnodeとnpmを新しくしておき

npm i -g ionic 
npm install @ionic/angular@latest --save
apt install ng-common
npm uninstall -g ionic
npm install -g @ionic/cli


ionic start test_app --type=ionic-angular

これでテンプレートを作成できる

typeオプションでは下記の設定が可能だ

angular
ionic-angularとの違いがまだわかってない
react
reactも対応したらしい
ionic-angular
angularとの違いがまだわかってない
ionic1
過去の遺物なのでもう使わない

今後 Vue等も対応されるようだ

今回はTabアプリを選んだ

実行

ionic serve

これでブラウザで実行できる

f:id:murasame-labo:20200822044725p:plain

2020-08-07

AWSのAmazonLinuxで色々はまる件

nginxで簡単なサーバをデプロイするタスクで、色々とはまった

タスク

nginxでRTMP通信を受けて、別のRTMPサーバにリレーするサーバの構築
ローカルのUbuntu（WSL）ではあっさり動いたので、AWSでもすぐできると思ったが、いろいろなハマリポイントがあった

インスタンス作成から設定

テストなのでmedium程度のインスタンスを作成しセットアップ
OSに悩んだが、なれたUbuntuもいいが、AmazonLinuxにした
インバウンド、アウトバウンドを設定する
RTMPなのでTCP1935を開け、疎通確認やHLSの取得に80も開ける。sshも開ける

インストール

nginx-rtmpモジュールはnginxをビルドする必要があるので、yumで開発ライブラリを入れる
AmazonLinuxはCentOS系で、yumで入れられるものが極端に少ない＆古い
そのため、速攻でEPELを有効化する
そして yumを行うがyumがエラーになる
調べてみると、AmazonLinuxはyumのパッケージリポジトリにS3を使うらしく、VPCの設定からS3の許可をする必要があった
エンドポイントすら作成してなかったので、VPCにエンドポイントを作り、S3の許可を与える
yum出来た

開発に必要なツールをyumで入れ、nginx、nginx-rtmpのソースを落として、ビルド

www.servermania.com

Ubuntu例だが、設定は同じなので。

ソースビルドして実行するもエラー
このあたりはCentOS特有のセキュリティ強いので設定をする

nginx関連のユーザやグループを設定し、ファイルやフォルダに適切に権限を与え
存在しなく怒られていたディレクトリを作成
などなど行い、やっとHTTPが動くように

そこからnginxにRTMPの設定を行うも
vimの表示が壊れたり、コピーペーストするとゴミが入ったりで苦労した

結論

CentOS系はセキュアな反面、色々とハマる

C++幼女先輩

プログラミング成分多め

Windows10 IoT Coreと Windows10 IoT Enterprizeに関して

ionicでモーダルウインドウを作ってみた

Generate