(2018年11月18日時点)
スケルトンスクリーンで知覚パフォーマンス向上
スケルトンスクリーン、あなたは実装するのが難しいと思っていませんか?
しかし、実装するのが簡単だといったらどう思いますか?
そして、スケルトンスクリーンは一旦アプリに追加すると、アプリを信じられないほど早く感じさせる素晴らしい機能になります。
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%;
}
}
<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 }}> </span>;
}
}
中身は↓
スケルトンスクリーンは、知覚パフォーマンスを向上させ、あなたのアプリを信じられないほど速く感じさせる非常に強力な方法です。
スケルトンスクリーンを実装すればアプリを次のレベルに引き上げることができます。
スケルトンスクリーンは、今のIonicでも非常に簡単に、次のバージョンではより簡単に実装できます。
今日、スケルトンスクリーンを実装しましょう!
ポケモンGoのコンパニオンアプリを2週間で作って4万ダウンロードを達成した話
Matt Kremer
1日目: Firebase Hostingに初歩的な機能をもったアプリを立ち上げ
3日目: IonicのCEOとデザイナーがロゴとTシャツを作ってくれた
9日目: いくつかの機能を付け加えてユーザーテストを行う
13日目: iOS、Androidアプリリリース
14日目: Redditにアプリを投稿
16日目: 全世界で4万回以上ダウンロード
17日目: ストアの評価は4.9
迅速に立ち上げ、成功への道を繰り返すなら車輪の再発明に時間を費やすべきではありません。
より早くなりたい場所に移動するためにはすでに経験しているフレームワークを利用するべきです
IonicのUI & UXはGoRangerに必要な物をすべて提供していた。そして、GoRangerのUIは非常に滑らかであるとコメントを得ています。
アプリの成功に最も重要な側面はユーザーの痛みを解決すること。
ポケモンGoは1ヶ月に3時間の「コミュニティデー」がまさにそう。私はイベントの存在を知ったらサンダルのままその場所に走らなければいけません(まさに痛み)
GoRangerの最初の機能は、進行中のイベントと予定されているイベントの両方を日付とカウントダウンに変換してリスト化した
アプリ成功の重要な要素はアクティブなユーザーベースを見つけること。GoRangerを使用したいと思っている他のトレーナーを見つける方法は次の通り
1. アクティブなコミュニティを見つける
2. そのコミュニティの一員になる
3. コミュニティと一緒にアプリを改善する
4. リリース!
5. 改善を繰り返す
ポケモンGoはコミュニティを見つけるのが非常に簡単
Redditにたくさんのコミュニティができている。ポケモンGoは最大のコミュニティであり、約100万人のメンバーがいて、そのうちの5000人以上がいつでもアクティブになっています。
すぐにコミュニティに商品を売り込むのは悪い考え。自分が痛みを感じるならばコミュニティも関係があるはず。
これを行う最も簡単な方法は、自分の問題を解決するアプリケーションを構築することです。
あなたが目標の人口統計の一部であるとき、あなたは痛みにもっと簡単に関連付けることができます。
自分のアプリのアイデアは素晴らしいと感じられますが、
しかし、できるだけ早くコミュニティに共感を得てもらう必要があります。
そのために、コミュニティに対して質問をしましょう
What do you look up frequently?
私は、ここでコミュニティが感じている問題にGoRangerがうってつけであることを確認できました。
その後、FirebaseでWeb版バージョンを公開して本番リリースまえに痛みの解決策として間違いないことを確認しました。
リリースは最もエキサイティングな体験の一つです。
しかし、実際の仕事は痛みを解決し続けることです。
世界中のポケモントレーナーはより良い体験をまっています。
Chrome 70 & デスクトップPWAのサポート
Chrome 70でデスクトップPWAがサポートされました。
Ionicは、ずっと前からWebに賭けており、Webが向上するにつれて、よりユニークでインパクトのある、シームレスなクロスプラットフォーム体験を創造する力があると信じています。
「今回のアップデートで私が気に入ったのは、大多数のユーザーに、より多くの機能を備えたブラウザを活用して、彼らが好きなWebサイトを使っているときにデスクトップ上でより良い体験をサポートできるという選択肢が得られたということです。このようにGoogleが勢いを増していることは、PWAを主流に持ち込むよう促し、ウェブがより魅力的で自然な品質の体験を創り出す力をユーザーに教えてくれることを願っています」
Max Lynch、IonicのCEO&共同創立者。
大規模な組織内の開発者は、従業員向けの内部サーバー、イントラネット、VPNなどのインフラストラクチャとネットワークのセキュリティをすでに確立しています。従来、全社的なアプリケーションを配布するには、すべてのマシンを最新の状態に保つことが難しいため、ITチームに大きなメンテナンスオーバーヘッドが発生することがよくありました。この新たに追加されたサポートの副作用は、開発者が時間、労力、および保守時間を大幅に削減しながら、大規模な組織向けに複数のアプリケーションを更新および保守することがはるかに容易になるということです。
Capacitor 1.0.0 Alphaリリース!
Capacitorは、iOS、Android、Electron、PWAとあらゆる場所で動作するIonicに、より良いネイティブランタイムを構築することを目指しています。
Capacitorは、クロスプラットフォームで処理する一貫したAPIを提供します。
つまり、Capacitorで構築されたアプリは、どこでも動作して機能します。
Ionicが成長するにつれて、モバイルのネイティブサポートとプラグインが問題になってきた
ネイティブのプラグイン機能の責任をコミュニティに押し付けるのはもはや十分じゃない。顧客が期待するレベルのサービスとモバイルアプリ開発者の経験を提供するために、その部分に責任を追うことにしました。
もう、ネイティブレイヤーについて話すことにうんざりしたのでCapacitorを構築することにしました
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ライブラリであるという本来の使命を果たします。
Ionic4は、標準のWeb APIを使用して再構築され、各コンポーネントは標準準拠のWebコンポーネントとしてパッケージ化されています
Ionic4は恐ろしい"フレームワークの乱れ"を避けるために設計されており、「何をすべきか」により多くの時間を費やすことができます。
簡単に言えば、Ionicのコンポーネントを再び書き直す必要はありません!
WebComponents FTW!
Ionic 4の利点の一つは、対応するAngularの更新を必要としないことです。
Angularの特定のバージョンにとどまれるし、Angularだけのバージョンアップも可能になりました。
また、Vue、Reactとわず一般的なフレームワークでIonicを簡単に採用することができるようになります。
Ionic 4はAngular CLIとRouterを完全に採用しています。
Angular開発者はAngularが進めている素晴らしい進歩を最新に保つことが可能になります。
Ionic CLI(4.0.0)のインストール
Ionic4のプロジェクト作成方法
皆様の感想お待ちしております by Ionic Team
npm install -g ionic
ionic start myApp tabs --type=angular