2018年のIonic Blogを

振り返る

Ionic Blogとは?

Ionic Teamが運営してる公式ブログ

URLはこちら

 

リリースのアナウンスとか、Ionicを使ったプロダクトの紹介、各種ノウハウの解説記事が行われてる

2018年の投稿は32件

(2018年11月22日時点)

アナウンス系 

・Ionicのリリース周りのアナウンス

・Ionic 4、Capacitor、Podcastなど

抜粋

その他:@ionic/vue、生体認証、Ionic Viewリジェクト

作ってみた系 

・Ionicを使って作ったプロダクト紹介

・0→1のところからグロースまで

抜粋

解説系 

・Ionicと直接関係ないが流行りの技術を紹介

・DevOps、Firebase、AWS 、スケルトンスクリーン

抜粋

エモ系 

・感想

・ VueConf、Chrome 70のデスクトップPWA対応

抜粋

雑感 

・2019年IonicはUIフレームワークとして側面が強くなる? 

 若干Onsen UIを彷彿とさせる気が...。

スケルトンスクリーンで知覚パフォーマンス向上

概要

スケルトンスクリーン、あなたは実装するのが難しいと思っていませんか?

しかし、実装するのが簡単だといったらどう思いますか?

 

そして、スケルトンスクリーンは一旦アプリに追加すると、アプリを信じられないほど早く感じさせる素晴らしい機能になります。

Justin Willis

(lil PWA )

スケルトンスクリーンとは?

Facebook、Slack、Medium等で使われている、実際にコンテンツが読み込まれる前に「スケルトン」をレンダリングする技法。

ローディングスピナーとの比較

ローディングスピナーとの比較

スケルトンスクリーンの利点

  • ローディングスピナーは、読み込み→表示まで点滅するので非常に不快な体験。

 

  • スケルトンスクリーンは、コンテンツ読込後、スムーズに完成したページを提供するので快適な体験です。

 

近くパフォーマンスの向上!

意外と簡単に実装可能

  <ion-list *ngIf="users">
    <ion-item *ngFor="let user of users">
      <h2>{{user.name}}</h2>
      <h3>Email: {{user.email}}</h3>
      <p>Company: {{user.company.name}}</p>
    </ion-item>
  </ion-list>

  <ion-list *ngIf="!users">
    <ion-item *ngFor="let fake of fakeUsers" class="fakeItem">
      <h2></h2>
      <h3></h3>
      <p></p>
    </ion-item>
  </ion-list>
.fakeItem {
 h2, h3, p {
   background-color: lightgrey;
   opacity: 0.5;
   height: 1em;
   margin-top: 10px;
 }

 h2 {
   width: 35%;
 }

 h3 {
   width: 40%;
 } 

 p {
   width: 60%;
 }
}

Ionic4だと標準コンポーネントに

<ion-item>
  <ion-skeleton-text width="40px"></ion-skeleton-text> 
</ion-item> 
import { Component, ComponentInterface, Prop } from '@stencil/core';

@Component({
  tag: 'ion-skeleton-text',
  styleUrls: {
    ios: 'skeleton-text.ios.scss',
    md: 'skeleton-text.md.scss'
  },
  shadow: true
})
export class SkeletonText implements ComponentInterface {

  /**
   * Width for the element to render at.
   */
  @Prop() width = '100%';

  render() {
    return <span style={{ width: this.width }}>&nbsp;</span>;
  }
}
中身は↓

最後に

スケルトンスクリーンは、知覚パフォーマンスを向上させ、あなたのアプリを信じられないほど速く感じさせる非常に強力な方法です。

スケルトンスクリーンを実装すればアプリを次のレベルに引き上げることができます。

スケルトンスクリーンは、今のIonicでも非常に簡単に、次のバージョンではより簡単に実装できます。

 

今日、スケルトンスクリーンを実装しましょう!

 

Ionic Blogを読もう

Ionic Advent Calendarも

よろしくお願いします

 

 

以下、予備スライド

ポケモンGoのコンパニオンアプリを2週間で作って4万ダウンロードを達成した話

概要

  • ポケモンGoのコンパニオンアプリGo RangerをIonicで作成
  • 早朝、夜間、週末をGoRangerの開発
  • DAUは約9000人(8月時点)

Matt Kremer

リリースまでの2週間

1日目: Firebase Hostingに初歩的な機能をもったアプリを立ち上げ

3日目: IonicのCEOとデザイナーがロゴとTシャツを作ってくれた

9日目: いくつかの機能を付け加えてユーザーテストを行う

13日目: iOS、Androidアプリリリース

14日目: Redditにアプリを投稿

16日目: 全世界で4万回以上ダウンロード

17日目: ストアの評価は4.9

 

なぜIonicか?

迅速に立ち上げ、成功への道を繰り返すなら車輪の再発明に時間を費やすべきではありません。

 

より早くなりたい場所に移動するためにはすでに経験しているフレームワークを利用するべきです

 

IonicのUI & UXはGoRangerに必要な物をすべて提供していた。そして、GoRangerのUIは非常に滑らかであるとコメントを得ています。

痛みへの集中が成功の要因

アプリの成功に最も重要な側面はユーザーの痛みを解決すること。

 

ポケモンGoは1ヶ月に3時間の「コミュニティデー」がまさにそう。私はイベントの存在を知ったらサンダルのままその場所に走らなければいけません(まさに痛み)

 

GoRangerの最初の機能は、進行中のイベントと予定されているイベントの両方を日付とカウントダウンに変換してリスト化した

コミュニティの立ち上げ

アプリ成功の重要な要素はアクティブなユーザーベースを見つけること。GoRangerを使用したいと思っている他のトレーナーを見つける方法は次の通り

 

1. アクティブなコミュニティを見つける  

2. そのコミュニティの一員になる

3. コミュニティと一緒にアプリを改善する

4. リリース!

5. 改善を繰り返す

1. アクティブなコミュニティを見つける

ポケモンGoはコミュニティを見つけるのが非常に簡単

 

Redditにたくさんのコミュニティができている。ポケモンGoは最大のコミュニティであり、約100万人のメンバーがいて、そのうちの5000人以上がいつでもアクティブになっています。

2. そのコミュニティの一員になる

すぐにコミュニティに商品を売り込むのは悪い考え。自分が痛みを感じるならばコミュニティも関係があるはず。

 

これを行う最も簡単な方法は、自分の問題を解決するアプリケーションを構築することです。

 

あなたが目標の人口統計の一部であるとき、あなたは痛みにもっと簡単に関連付けることができます。

3. コミュニティと一緒に改善する

自分のアプリのアイデアは素晴らしいと感じられますが、

しかし、できるだけ早くコミュニティに共感を得てもらう必要があります。

そのために、コミュニティに対して質問をしましょう

What do you look up frequently?

 

私は、ここでコミュニティが感じている問題にGoRangerがうってつけであることを確認できました。

 

その後、FirebaseでWeb版バージョンを公開して本番リリースまえに痛みの解決策として間違いないことを確認しました。

4. リリース!

仕事はここで終わらない

リリースは最もエキサイティングな体験の一つです。

 

しかし、実際の仕事は痛みを解決し続けることです。

世界中のポケモントレーナーはより良い体験をまっています。

Keep Solving more pain, better!

Chrome 70 & デスクトップPWAのサポート

概要

Chrome 70でデスクトップPWAがサポートされました。

 

Ionicは、ずっと前からWebに賭けており、Webが向上するにつれて、よりユニークでインパクトのある、シームレスなクロスプラットフォーム体験を創造する力があると信じています。

動画

ユーザーへの影響

「今回のアップデートで私が気に入ったのは、大多数のユーザーに、より多くの機能を備えたブラウザを活用して、彼らが好きなWebサイトを使っているときにデスクトップ上でより良い体験をサポートできるという選択肢が得られたということです。このようにGoogleが勢いを増していることは、PWAを主流に持ち込むよう促し、ウェブがより魅力的で自然な品質の体験を創り出す力をユーザーに教えてくれることを願っています」

Max Lynch、IonicのCEO&共同創立者。

企業への影響

大規模な組織内の開発者は、従業員向けの内部サーバー、イントラネット、VPNなどのインフラストラクチャとネットワークのセキュリティをすでに確立しています。従来、全社的なアプリケーションを配布するには、すべてのマシンを最新の状態に保つことが難しいため、ITチームに大きなメンテナンスオーバーヘッドが発生することがよくありました。この新たに追加されたサポートの副作用は、開発者が時間、労力、および保守時間を大幅に削減しながら、大規模な組織向けに複数のアプリケーションを更新および保守することがはるかに容易になるということです。

より詳しく知りたい場合

PWAがビジネスに与える影響についてはこちら

https://ionicframework.com/pwa

 

また開発者の方はすぐにIonicをインストールしましょう

https://ionicframework.com/pwa/toolkit

Capacitor 1.0.0 Alphaリリース!

概要

Capacitorは、iOS、Android、Electron、PWAとあらゆる場所で動作するIonicに、より良いネイティブランタイムを構築することを目指しています。

 

Capacitorは、クロスプラットフォームで処理する一貫したAPIを提供します。

 

つまり、Capacitorで構築されたアプリは、どこでも動作して機能します。

Capacitorの特徴

  • PWAのサポート、Web上もネイティブアプリと同じAPIを使用して、100%のコード共有を実現します
  • プラグインはnpmで管理
  • ファイルシステム、触覚フィードバックなどネイティブ昨日の豊富な標準ライブラリ
  • 多くのCordovaプラグインをサポートしています

動画

なぜCapacitorを作ったか?

 

Ionicが成長するにつれて、モバイルのネイティブサポートとプラグインが問題になってきた

 

ネイティブのプラグイン機能の責任をコミュニティに押し付けるのはもはや十分じゃない。顧客が期待するレベルのサービスとモバイルアプリ開発者の経験を提供するために、その部分に責任を追うことにしました。

 

もう、ネイティブレイヤーについて話すことにうんざりしたのでCapacitorを構築することにしました

Cordovaを捨てたわけではない

Corodvaを放棄したわけではないし、ハイブリッドアプリを放棄したわけではないです(IonicはCordovaのファンです)

 

Capacitorは既存のCordovaプラグインの大部分をサポートするよう設計されています。プラグインを使用しnpm installで簡単にプラグインを更新できます。

 

あなたのフィードバックが必要です

α版リリースには、何千ものコミットに3ヶ月の労力を費やしています。

 

Capacitorを前進させるために皆さんの協力が必要です

 

Document:https://capacitor.ionicframework.com/

GitHub:https://github.com/ionic-team/capacitor

Slack:http://getcapacitor.herokuapp.com/

 

Ionic 4 Betaリリース🎉🎉🎉

概要

Ionicの最高のバージョンIonic 4.0.0ベータ版の発表

 

ツールやJSフレームワークに関係なく、Web開発者のための UIライブラリであるという本来の使命を果たします。

Web標準による安定化

 

Ionic4は、標準のWeb APIを使用して再構築され、各コンポーネントは標準準拠のWebコンポーネントとしてパッケージ化されています

 

Ionic4は恐ろしい"フレームワークの乱れ"を避けるために設計されており、「何をすべきか」により多くの時間を費やすことができます。

 

簡単に言えば、Ionicのコンポーネントを再び書き直す必要はありません!

WebComponents FTW!

FWの統合と互換性

Ionic 4の利点の一つは、対応するAngularの更新を必要としないことです。

 

Angularの特定のバージョンにとどまれるし、Angularだけのバージョンアップも可能になりました。

 

また、Vue、Reactとわず一般的なフレームワークでIonicを簡単に採用することができるようになります。

Angular CLI採用

Ionic 4はAngular CLIとRouterを完全に採用しています。

 

Angular開発者はAngularが進めている素晴らしい進歩を最新に保つことが可能になります。

その他の変更点

  • Ionicons 4.0: font fileからSVGに変更しサイズを大幅に縮小した新しいionicons
  • ネイティブAPI: Angular以外で簡単に使えるWrapperもあるけどAngularプロパイダーとしても提供します
  • CLI4.0: Ionic CLIもIonicアプリ開発のツールとして残してあります

β版の始め方

Ionic CLI(4.0.0)のインストール

 

 

Ionic4のプロジェクト作成方法

 

 

 

皆様の感想お待ちしております by Ionic Team

npm install -g ionic
ionic start myApp tabs --type=angular

2018年のIonic Blogを振り返る

By scrpgil

2018年のIonic Blogを振り返る

  • 411