久しぶりに ionic startしてみた

Transcript

1. Ionic Meetup #22 Tokyo 2022-07-09
   sakakibara kosuke
   久しぶりに
   ionic startしてみた
   

   View Slide

2. 自己紹介
   ● 榊原宏祐
   ● 株式会社キネカ 取締役CTO
   ○ 最近は業務の9割以上は開発以外
   ○ 会計、採用、1on1など
   

   View Slide

3. - 2017年1月創業
   - エンタメスキルシェアサービス
   「pato」の開発・運営
   - 社員：30~40名
   - 平均年齢25~26歳
   キネカについて
   

   View Slide

4. スポンサー契約
   内緒
   

   View Slide

5. 最近の一日
   内緒
   

   View Slide

6. ionic startを使う機会がない...
   

   View Slide

7. - 最近はNextJS + Ionicの組み
   合わせが多く、オレオレStarter
   プロジェクトを使ってばっかり
   個人開発でIonicを使うこともあるが...
   https://github.com/scrpgil/nextjs-tailwind-ionic-capacitor-typescript-starter
   

   View Slide

8. - LT駆動のアプリ開発で久し
   ぶりに、ionic start使った
   ところで、前回のIonic Meetup #21
   

   View Slide

9. ionic startしてみた
   

   View Slide

10. 記憶の中のionic start
    $ ionic start
    ? Framework: (Use arrow keys)
    ❯ Angular | https://angular.io
    React | https://reactjs.org
    Vue | https://vuejs.org
    $ Every great app needs a name! 😍
    ? Starter template: (Use arrow keys)
    ❯ tabs | A starting project with a simple tabbed interface
    sidemenu | A starting project with a side menu with navigation in the content area
    blank | A blank starter project
    list | A starting project with a list
    my-first-app | A template for the "Build Your First App" tutorial
    

    View Slide

11. 現在のionic start
    $ ionic start
    ? Use the app creation wizard? (Y/n)
    ✔ Preparing directory ./sample in 1.79ms
    

    View Slide

12. 2021-08-11にはリリース済み
    https://github.com/ionic-team/ionic-cli/blob/develop/packages/%40ionic/cli/CHAN
    GELOG.md#6170-2021-08-11
    

    View Slide

13. Wizard自体の登場
    は2020年
    https://twitter.com/benjs
    perry/status/12479690545
    32481026
    

    View Slide

14. ionic startの中身
    $ ionic start --verbose
    ? Use the app creation wizard? Yes
    ionic:utils-network checking for open port on 0.0.0.0:8123 +0ms
    ionic:utils-network checking for open port on 127.0.0.1:8123 +5ms
    ionic:utils-network checking for open port on ::1:8123 +1ms
    ionic:utils-network checking for open port on fe80::1:8123 +1ms
    ####### ブラウザ上でWizardやる #######
    superagent POST https://api.ionicjs.com/oauth/token +0ms
    superagent POST https://api.ionicjs.com/oauth/token -> 200 +943ms
    superagent GET https://api.ionicjs.com/users/self +6ms
    superagent GET https://api.ionicjs.com/users/self -> 200 +741ms
    superagent GET https://ionicframework.com/api/v1/wizard/app/98f4bf8b +155ms
    superagent GET https://ionicframework.com/api/v1/wizard/app/98f4bf8b -> 200 +899ms
    superagent POST https://ionicframework.com/api/v1/wizard/app/98f4bf8b/start +876ms
    superagent POST https://ionicframework.com/api/v1/wizard/app/98f4bf8b/start -> 201 +1s
    ionic:lib:telemetry Sending telemetry for command: 'ionic start' [
    

    View Slide

15. ionic startの中身
    https://github.com/ionic-team/ionic-site/blob/4236cfad110667274aad9fb1ac90508ef1f007ef/a
    ssets/stencil/components/app-wizard/app-wizard.tsx#L259
    

    View Slide

16. 仕組み
    1. ionic cliでwizardセッションを起動する
    2. 「Create App」で作成する情報をIonicのサーバーにpostする
    3. resでstart_idもらう
    4. cliからstart_idをキーに情報取得
    5. 新規PJ作成
    仕組み
    

    View Slide

17. - https://ionicframework.com/start#basics
    または
    - https://ionic.new
    - GitHub：コード
    -
    CLI以外でも利用可能
    

    View Slide

18. - StartupAngularというイベントをやります。
    - Startup × AngularというテーマでMeetup、OSTをやるイベントで
    す。
    - 前回は「Angularの情報どこで収集してますか？」というテーマで
    みんなで雑談しました。
    https://github.com/orgs/StartupAngular/discussions/37
    - 9月、オフラインイベント開催予定
    - 後日Twitterで告知します。
    おわり（＆宣伝）
    

    View Slide

19. ご清聴ありがとうございました
    

    View Slide