#ng-japan 2017へ参加しました
本日(2017/6/17)、ng-japan 2017に参加しました。
会場は、日本マイクロソフト品川本社でした
I'm at 日本マイクロソフト - @mskkpr in 港区, 東京都 https://t.co/F5DFyHGLuB
— 243 (@nishi3__) 2017年6月17日
いや~どれも聞いてて楽しく、有益な情報ばかりでした
見たセッションと感想
Keynote -Stephen Fluin (Angular Core Team)
資料 -> 2017-06-17 - How to Think About Angular - Speaking Engagement - Google スライド
実際に英語のスピーチを前で聞くことがないので大丈夫かなと思いましたが、テンションが上がりました。Angularとionicで挑戦したモバイルアプリ開発 -Yasunobu Ikeda
資料 ->AngularとElectronやIonicで挑戦した デスクトップ・モバイルアプリ開発
Ionicのお話を聞けると聞いていったらAngular+Electronのお話も聞けてとてもよかったです!!
特にタップの話はほんと対策の方法が"touchstart"にしたのは笑ってしまいました(同じこと思ってたので)You need to know SSR -Yosuke Furukawa
資料 ->You Need to know SSR - Speaker Deck
SSR自体が名前をよく聞いてサーバーでレンダリングまでするようなあやふやなことしかしたらなかったのでちゃんと聞いてみようと思って聞きました。
短い時間でしたが、SSRがSEOや表示スピードに大きく影響を与えることがよくわかったり、「個人的にはパフォーマンスでは妥協したくない」がとても響きました。Visual StudioとVisual Studio Codeで快適開発生活(仮) -Saki Homma
資料 ->Visual Studio Code で快適開発生活 -拡張を作って公開しよう-
拡張の作り方や登録して公開する方法まで一通り分かったので活用していきたいです。Web Payments + Credential Management API -Eiji Kitamura
Web PaymentsもCredential Managemeny APIもどちらもとても聞いてて面白い話だったんですが、やっぱりCredential Managemeny APIがすごくてこれからいろいろ調べていきたいと思いました。(使いたい!!!)Angular, Firebase, Cloud Functions for Firebase -Tomohiro Noguchi
資料 ->ng-japan 2017 - Google スライド
ちきさん転職おめでとうございます! 僕がFirebaseを使い始めるときからずっと見かけていた人でなんどか話とかも聞いてたので今回もどんな話なのかとても楽しみで、予想通りとてもためになり楽しかったです demoを使って実際にみんなで使えたりと体験もよかったですし、所々笑えることが入ってたりよかったです!webrtc + Firebase + Angular でのリアクティブweb app開発 -Yuta Moriyama
ディスカッションのシステムで容量を減らすために静止画にしてFirebaseのstorageに投げるやつはいいと思ったので活用していきたいと思いました。AngularでWebRTCはやったことがあったんですが挫折しているので僕も再挑戦したいです!
最後の2つはあまり覚えてないので割愛します。(疲れてて少し寝てしまったので)
最後に、参加できてとてもよかったので来年もあったら参加したいです!!!!
(時間ができたらもう少し整えます)
WebRTCでビデオチャット(Firebaseを添えて①)
WebRTCでビデオチャットを作成しました
最初は普通のシグナリングでやろうと思いましたが、サーバーを立てる気もないし時間もないので、WebサーバーはGitHub Pagesを使い、シグナリングサーバーを使う代わりにFirebaseを使用しました。
半分以上はWebRTCハンズオンとがねこまさしさんのFirebaseで楽々シグナリングからコードをコピペでしてますが、それに少し少し変えてます。
今回は、Firebase周りのすることだけです。(タイトルでできる感じに見えますがすいません)
サイト
BootStrapを使用してまあまあ見やすいと思うサイトにしました(なにをしてるかわかりませんよね)
シグナリングサーバー
シグナリングにはsocket.ioやWebSocketを使用します。あとは、手動でシグナリングを行うこともできますが、一般的にはWebSocketが多く使われます。
また、ローカルで開発/使用するときはセキュアでなくてもいいですが、外部へ公開するときやhttps://~から取得されたHTML/JavaScriptからWebSocketサーバーに接続する場合は、セキュアでなくてはならないので証明書が必要になります。そこで今回はFirebaseのRealtime Databaseを使用して、シグナリングを行います。
Firebaseでシグナリング!
Firebaseへログインして、プロジェクトを作成しておいてください。
ブラウザでFirebaseを使用するために、ライブラリを読み込みます。前は数個入れなければならなかったですが、現在は下のjsファイルを読み込めば使えます。
<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
次に、取得した情報を入れてます。
var config = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "" }; firebase.initializeApp(config);
(たぶん、apiKeyとdatabaseURLだけでいいと思います)
Databaseの構造
Firebaseの構造は、がねこまさしさんのやつを見たほうが早いです!
- myAppRoot -> アプリのルート
- multi -> ルート
- room_*** -> ルームのルート
- join -> メンバーの振り出し用
- _broadcast -> ルーム内のブロードキャスト用
- direct -> 特定メンバー宛てのメッセージ用 自分もはっきりわかってないので実際にやって見てほしいです(たぶん別の記事で書きます)
- room_*** -> ルームのルート
- multi -> ルート
Firebaseのルール設定
これを忘れることが多分多いと思います(自分も忘れて1週間近くできね〜ってなったので)
{ "rules": { ".read": "auth !=null", ".write": "auth !=null", "yourAppRoot": { "multi": { ".read": true, ".write": true } } } }
次回
たぶん、WebRTCでビデオチャット(Firebaseを添えて②)なのでちゃんとビデオチャットをやる予定です(でも、webRTCでのビデオチャットのやり方を書いてなかったのでそれを挟むと思います)
5/8
GWが終わったので、今週から週イチで書いていきますマル
せっかくなのでGWやったこと 4/28~5/3 岡山
— NISHI3(フェネック)🍣 (@nishi3__) 2017年4月29日鳥取砂丘でドローン飛ばした
帰りに寄った美味しかった(千里中央) pic.twitter.com/anJbcS2m7v
— NISHI3(フェネック)🍣 (@nishi3__) 2017年5月2日
コレ以降は、病院と家でゴロゴロしてた
明日から大学なので頑張る
Firebase for Swift3(導入)
前にIonic2のFirebase導入記事(こちら)を書いたので、今度はSwift3の導入記事です
といっても、公式ドキュメントを見た方がいいです
(公式ドキュメント => Firebase)
Firebaseプロジェクトに追加(console)
Firebase Consoleよりプロジェクトを作成します
追加しましたら、console画面でiosアプリにFirebaseを追加を選択します
1.Register app
ここで、必要な情報を入れます
2.Download config file
次にGoogleService-Info.plistをダウンロードして、 Xcode プロジェクトのルートに移動し、すべてのターゲットに追加します
3.Add Firebase SDK
cocoaPodsからFirebaseのライブラリを入れてください。
(cocoaPodsを入れてない人はここでインストールしておきましょう -> CocoaPods.org)
終わったら、 .xcworkspaceを開いておきましょう
4. 初期化コードを追加
あとは、 AppDelegateクラスに初期化コードを入れておきましょう
これで、Firebaseの導入は終了です
Ionic2+ng2-charts(導入)
概要
数日コレで悩んでやっとできたので、備忘録です。
ng2-chartsとは棒グラフとか円グラフとかを表示できるやつです。
ng2-chartsのインストール
npm install --save ng2-charts
node_modulesにchart.js/
とng2-charts/
ができるはずです(たぶん)
app.module.tsに追加
import { ChartsModule } from 'ng2-charts/ng2-charts'; import '../../node_modules/chart.js/dist/Chart.bundle.min.js'; // In your App's module: imports: [ ChartsModule ]
import { ChartsModule } from 'ng2-charts/ng2-charts';
だけだとエラーができるので、import '../../node_modules/chart.js/dist/Chart.bundle.min.js';
を追加することでちゃんと動くようになります。
sample
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <div style="display: block"> <canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> </div> </ion-content>
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController) { } // Doughnut public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales']; public doughnutChartData:number[] = [350, 450, 100]; public doughnutChartType:string = 'doughnut'; // events public chartClicked(e:any):void { console.log(e); } public chartHovered(e:any):void { console.log(e); } }