SlideShare a Scribd company logo
1 of 58
Download to read offline
TechFeedのつくりかた
Angular2 / Webpack / Ionic2 / Cordova
実践入門
2016/09/03
株式会社オープンウェブ・テクノロジー
TechFeed統括
白石 俊平
今日の結論
今後Webはコンポーネント
指向になる!(断言)
本日のアジェンダ
• 自己紹介
• TechFeedとは
• 要素技術の概要/採用の経緯
– Cordova
– Angular2
– Ionic2
– Webpack
• それぞれの技術のメリット/デメリット
自己紹介
• html5jファウンダー
• HTML5 Experts.jp編集長
• 株式会社オープンウェブ・テクノロジー
CEO
– TechFeedというサービスをやっています
TechFeed
• エンジニア向けキュレーションサービス
– 世界中から、エンジニア向けの情報収集&ランキング
• エンジニアがウォッチしなくてはならない情報は多様&ディープ
– 人力でやるべきではない→サービスつくった
ぜひ使ってみてください。
http://techfeed.io
TechFeed Mobileのアーキテクチャ
Ionic2
App
Angular2
Cordova
Webpack
main.js
vendor.js
main.css
要素技術の概要/採用の経緯
Cordova
モバイルOS
(iOS/Android…)
Cordovaとは?
• モバイルアプリをHTML/CSS/JavaScriptで開発できる
ようにしてくれるプラットフォーム
• 各種モバイルOSが備えるWebViewの上で動作する
• プラグインを使用することで、ネイティブの機能も呼
び出せる
WebView
Webアプリ
プラグイン
Cordovaアプリケーション
なぜCordovaだったか?
• Webフロントエンドに関する知識を活用
したかった
– エンジニアが全員Web技術者
• モバイルアプリのコードベースを統一し
たかった
• できればWebとモバイルアプリのコード
も統一したかった
– PWAppsも見据えつつ
TechFeedでのCordova利用
• TechFeedでは、以下のプラグインを利用
(一部)
– プッシュ通知
– ディープリンク(ユニバーサルリンク)
– アプリ内ブラウザ(InAppBrowser)
– SafariViewController/ChromeCustomTabs
• SafariやChromeをアプリと統合できる
– Crosswalk
– …
プッシュ通知
• phonegap-plugin-pushというプラグインを使用
• プッシュ通知に関わる処理を、OSに関わらず同じコー
ドで書ける
// プッシュAPIの初期化
const push = Push.init({
android: {icon: 'icon'},
ios: {alert: true}
});
push.on('registration', data => {
// デバイストークン取得時の処理
this.registerDevice(data.registrationId)
});
push.on('notification', data => {
// プッシュ通知がタップされた際の処理
...
});
ディープリンク
(ユニバーサルリンク)
• cordova-universal-links-pluginを使用
• 特定のURLに反応して、モバイルアプリが立
ち上がるようにできる。
– TechFeedの場合、メールのリンクをタップした
らアプリが起動する
// プラグインから発生するイベントを監視
universalLinks.subscribe(null, (event) => {
const {url} = event;
// URLから、アプリの特定のビューを開く処理
…
});
Crosswalk
• https://crosswalk-project.org/
• (主にAndroid)デバイスやOSの差異に関わらず、最先端の
WebViewを提供してくれるプラグイン
– Chromiumの独自ビルドを内包することで実現
• Androidデバイスのフラグメンテーションとおさらばできる!
– これはかなり嬉しい
最先端のWebViewに
差し替えてしまう
Angular2
Angular2とは?
• Angular.jsの後継フレームワーク
• 1系と互換性はないが、移行は可能
• 1系との最も大きな違いはコンポーネント
指向であること
Angular2の特徴
• TypeScriptを推奨
• コンポーネント指向
• 包括的なアプリケーションアーキテク
チャ
– モジュール
– Dependency Injection
コンポーネントのコード例
import {Component} from '@angular/core';
@Component({
selector: 'my-alert-button',
template: `
<button (click)="click()">Click me!</button>
`,
styles: [`
button { width: 100%; }
`]
})
export class AlertButtonComponent {
click(): void {
window.alert('Hello');
}
}
Angular2のコンポーネ
ントを読み込み
ES7のデコレータを使
用 コンポーネントのタグ
名を指定
コンポーネントのテン
プレート
コンポーネントのイベ
ントを捕捉
コンポーネントのスタ
イル
Angular2のDependency Injection
• DI=依存性注入
– 依存関係にあるクラスのインスタンス生成と注入をフレーム
ワークに任せる
• テスト容易性、メンテナンス性に優れたコードを素早く書け
るようになる
import {Injectable} from
'@angular/core';
@Injectable()
export class MyService {
loadData(): string[] {
return ['a', 'b', 'c'];
}
}
@Component({
providers: [MyService]
})
export class AppComponent {
constructor(
myService: MyService) {
}
}
なぜAngular2を選んだか?
• コンポーネント指向を採用したかった
– 最初に作ったWeb版で、共通化したい部分が多数あることに気
付いたため
• TypeScript
– 型なしで大規模アプリを書くことに少し疲れを感じていた。。
– 今の時代どうせビルドが必要なので、コンパイルしてほしい
一覧の項目はいたる
ところで再利用する
なぜReactではなくAngular2を選ん
だか?
• 当時、Reactにはモバイルアプリ用UIフレームワーク
のデファクトが存在しなかった
– 今ならOnsen UIが使える
• 「フレームワーク」が欲しかった。
– 割と強めの規律でチームのコーディングスタイルを統一し
たかった
– アーキテクチャを模索している時間が惜しい
• React+Reduxが難しかった。。
– かなりのパラダイムシフト+学習コストが必要に感じた。
– 一方Angular2は、Angular1を知っていると、アーキテク
チャの理解は割とすんなり。
• DI / ディレクティブ / パイプ…
Ionic2
Ionic2とは
• Angular2上に構築されたUIフレームワー
ク
• iOS/Android/Windows Phone Mobileに対
応し、スタイルの自動的な切り替えにも
対応
• 最初から数多くのUIコンポーネントを備
える
– UIの開発効率はかなり高い
Ionic2のコンポーネント例
リスト
サイドメニュー
フォームタブバー
Ionic2のコード例
• Ionic2独自のコンポーネントを使用してテンプレートを記述
していく
<form [formGroup]="form" (ngSubmit)="changeUsername()">
<ion-label stacked>ユーザーID</ion-label>
<ion-input type="username" required
autocapitalize="none"></ion-input>
<button type="submit" full [disabled]="!isValid">
変更する</button>
</form>
なぜIonic2を選んだか?
• Angular2に対応したUIフレームワークは、
当時唯一の選択肢だった。
– 今ならOnsen UIもある
• 「モバイルアプリ」を作りたかった。
– モバイルアプリのUXを自動的に実現してくれ
る
– 以前のWeb版はBootstrapなどを使用していた
Webpack
Webpackとは
• モジュールバンドラーの一種
– JavaScriptモジュールをまとめ上げ、1つ(以
上)のファイルを出力するツール
• すさまじく多機能
モジュールバンドラー
• モジュールバンドラーで、import/exportを
JSコードに変換
import {Component} from '@angular2/core'
↓ (TypeScriptコンパイラ)
var Component = require('@angular2/core').Component;
↓ (モジュールバンドラーがrequireをブラウザ上で使えるよう変
換)
var component_1 = __webpack_require__(1);
Webpackの設定
• Webpackの設定は、webpack.config.jsに記述
する。
• 基本的な考え方は、
– ローダーがファイルを読み込み
– JSコード内のrequireから依存関係を解釈し、
– 最終的なファイル出力
ts
ts js
js
js
ts-loader
ts-loader
ts-loaderts
main.js
Webpackは超多機能
• ローダーも、プラグインも、死ぬ
ほどある
– ローダーの一覧
– プラグインの一覧
List of loaders
なぜWebpackを選んだか
• 実績豊富
• 機能豊富
• AngularのチュートリアルではSystem.jsが
使われているので、悩ましくはあった
– JSPMと組み合わせなくてはならなそうなの
が面倒に感じた
公開!TechFeedの開発環境
• Angular2
• Ionic
• gulp
• Webpack
• (Cordova)
開発フロー上のポイント
• 基本的にはブラウザで開発
• 実機上の開発版アプリも、コードを修正
すると自動的にリブートする
BrowserSync
ブラウザはもちろん、
アプリもリロードできる
(CordovaがリモートWeb
アプリも読み込めるのを利用)動画あります: http://goo.gl/ub6AxU
ソースコード上のポイント
• コンポーネントはすべて、
以下のファイルの組み合わ
せからなる
– HTML
– SCSS
– TypeScript
• Webpackがこれらをまとめ
上げてくれる
– HTML/CSSのコードもJSに
一体化
– SCSS→CSS変換も自動的に
それぞれの技術を振り返る
Cordovaを振り返る
Cordovaを振り返る
• メリット
– コードベースが統一できる
• 頑張ればモバイルとWebアプリも統一可能
• 「Progressive Web Apps + モバイルアプリ」が可
能
– Webに関するスキルがフル活用できる
– Webブラウザでモバイルアプリを開発できる
– Crosswalkのおかげで、Androidのバージョン
差異が問題にならない
Cordovaを振り返る
• デメリット
– やはり、ネイティブに比べると動作が遅い
– 一人のエンジニアが全OS面倒見なくてはなら
なくなる
• ネイティブの機能を使う場合、いろいろしんどい
– Crosswalkでかい(20M超)
– iOSのWebViewがしょぼい(WKWebViewで
あっても)
• 遅い、バグる
• IE6を彷彿とさせる…
Angular2を振り返る
Angular2を振り返る
• メリット
– Angular1の反省がよく活かされている
• 全体的に整理されていて美しい
• パフォーマンス
– アーキテクチャ上迷うことがあまりない
• Dependency Injectionは便利
• CSSのカプセル化も最初から利用可能
– 静的型付け言語をベースとした、縛り強めな
フレームワークなので、コードがぐちゃぐ
ちゃになりにくい
Angular2を振り返る
• デメリット
– 学習コストが高い
• TypeScript
• RxJS
• 当然Angular2そのものも
– 静的型付け言語が嫌いな人にはつらい
– バージョンアップがつらい(今だけだけど)
TypeScriptを振り返る
TypeScriptのメリット
• 最新の言語仕様を思う存分使える
• 静的型付け言語である
– コンパイラによるコードの静的解析
– コードがより文書的
– ツールによるコーディング補助
• 入力補完
• リファクタリング
TypeScriptのデメリット
• ツールチェインがまだ未成熟
– WebStormといえどもまだまだ
• JavaScriptコードとの統合はやはりつらい
– 基本的には型定義ファイル(d.ts)必要
– JSとTSの間には浅くない溝がある
– なので、プロジェクトの一部をTSで…というのは厳
しい
• 静的型付け言語である
– 記述が冗長になりがち
– JSほど気楽に書き下させない
– ビルドが速くない(これはBabelでも同じだが…)
Ionic2を振り返る
Ionic2のメリット
• 開発効率上がる
• ネイティブアプリに近いUXを得られる
• ionic-nativeは地味に嬉しい
– CordovaのプラグインをTypeScriptでラップし
てくれている
– これがなかったら、全部anyでやるか、d.tsを
書かねばならないところ
Ionic2のデメリット
• 遅い
– 正式リリース前だからだと信じたい
• サーバサイドレンダリングは諦めざるを
得ない
• カスタマイズが面倒
– これはUIフレームワーク全般に言える話
• バージョンアップがしんどい(正式リ
リース前だからだと信じたい)
Webpackを振り返る
Webpackのメリット
• import/exportが使えるようになる
– <script>地獄からの開放
• 機能・プラグインが豊富
– 欲しいと思ったものはたいがい、ある。
• コミュニティ・実績が豊富
– ググればだいたい出てくる
Webpackのデメリット
• 機能が豊富すぎて、何でもやらせたく
なってしまう
– 実際にはGulpとかに任せたほうが楽なことも
多い
• 謎の難しさがあり、学習コストが高い
– 出来上がったwebpack.config.jsは単純でも、
そこにたどり着くまでがしんどい。。
TechFeedでのビルド環境
• 結局、適材適所の組み合わせ
– npm scripts…ビルドコマンドの定義
– Gulp…ビルドフロー全体をコントロール
– Webpack…モジュールバンドル(だけ)
• 「○○だけでOK、もう△△は古い」という言説は
疑ってかかれ
npm
scripts
Gulp Webpack
コンポーネント指向開発
を振り返る
コンポーネント指向開発
のメリット
• 適度にコード分割されるので、コードの
見通しが良い
• 外部コンポーネントの活用で開発効率
アップ
• コンポーネントの再利用性も高まる
コンポーネント指向開発
のデメリット
• 開発を始めるまでの準備が結構かかる
– フレームワークなどのセットアップ
– コンポーネント設計
• かなり未来感あるので、勉強が大変
準備せよ。
向学心を燃やせ。
まとめ
今後Webはコンポーネント
指向になる!(断言)
ご清聴ありがとうございました。
http://techfeed.io
http://facebook.com/techfeedapp
http://twitter.com/techfeedapp
“エンジニアなら、使っとけ。”

More Related Content

What's hot

noteをAngularJSで構築した話
noteをAngularJSで構築した話noteをAngularJSで構築した話
noteをAngularJSで構築した話Kon Yuichi
 
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①Tomokatsu Iguchi
 
クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性Yasunobu Ikeda
 
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0Okuno Kentaro
 
スキスキIonic
スキスキIonicスキスキIonic
スキスキIonicKon Yuichi
 
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-Shinichiro Yoshida
 
Angular js開発事例
Angular js開発事例Angular js開発事例
Angular js開発事例Shun Takeyama
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリアシアル株式会社
 
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップAngular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップKazuyoshi Tsuchiya
 
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化Toshio Ehara
 
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用についてsmartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について剛志 森田
 
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923Staffnet_Inc
 
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしましたMitsuru Ogawa
 
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIGHayashi Yuichi
 
Monacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonaca
 
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話kumatch kumatch
 

What's hot (20)

noteをAngularJSで構築した話
noteをAngularJSで構築した話noteをAngularJSで構築した話
noteをAngularJSで構築した話
 
Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①Ionicでハイブリッドアプリ入門①
Ionicでハイブリッドアプリ入門①
 
クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性
 
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
 
スキスキIonic
スキスキIonicスキスキIonic
スキスキIonic
 
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
 
Angular js開発事例
Angular js開発事例Angular js開発事例
Angular js開発事例
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
 
俺とAngular JS 2
俺とAngular JS 2俺とAngular JS 2
俺とAngular JS 2
 
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップAngular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
 
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
 
smartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用についてsmartFXにおけるApache Cordovaの活用について
smartFXにおけるApache Cordovaの活用について
 
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
 
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
 
AngularJS 概説
AngularJS 概説AngularJS 概説
AngularJS 概説
 
Onsen UIが目指すもの
Onsen UIが目指すものOnsen UIが目指すもの
Onsen UIが目指すもの
 
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
 
Angular#Kanazawa
Angular#KanazawaAngular#Kanazawa
Angular#Kanazawa
 
Monacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
 
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
 

Viewers also liked

ポコロンダンジョンズとリアルタイム通信 -サーバサイド編-
ポコロンダンジョンズとリアルタイム通信 -サーバサイド編-ポコロンダンジョンズとリアルタイム通信 -サーバサイド編-
ポコロンダンジョンズとリアルタイム通信 -サーバサイド編-Suguru Shirai
 
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Google Container Engine と Kubernetes で 無理をしないコンテナ管理Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Google Container Engine と Kubernetes で 無理をしないコンテナ管理Ryosuke Suto
 
ポコロンダンジョンズとリアルタイム通信 -クライアント編-
ポコロンダンジョンズとリアルタイム通信 -クライアント編-ポコロンダンジョンズとリアルタイム通信 -クライアント編-
ポコロンダンジョンズとリアルタイム通信 -クライアント編-Suguru Shirai
 
SwiftでRiemann球面を扱う
SwiftでRiemann球面を扱うSwiftでRiemann球面を扱う
SwiftでRiemann球面を扱うhayato iida
 
ICLR読み会 奥村純 20170617
ICLR読み会 奥村純 20170617ICLR読み会 奥村純 20170617
ICLR読み会 奥村純 20170617Jun Okumura
 
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-Takahiro Kubo
 
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @DenaICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @DenaTakanori Nakai
 
[ICLR2017読み会 @ DeNA] ICLR2017紹介
[ICLR2017読み会 @ DeNA] ICLR2017紹介[ICLR2017読み会 @ DeNA] ICLR2017紹介
[ICLR2017読み会 @ DeNA] ICLR2017紹介Takeru Miyato
 
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会Eiji Sekiya
 

Viewers also liked (12)

ポコロンダンジョンズとリアルタイム通信 -サーバサイド編-
ポコロンダンジョンズとリアルタイム通信 -サーバサイド編-ポコロンダンジョンズとリアルタイム通信 -サーバサイド編-
ポコロンダンジョンズとリアルタイム通信 -サーバサイド編-
 
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Google Container Engine と Kubernetes で 無理をしないコンテナ管理Google Container Engine と Kubernetes で 無理をしないコンテナ管理
Google Container Engine と Kubernetes で 無理をしないコンテナ管理
 
ポコロンダンジョンズとリアルタイム通信 -クライアント編-
ポコロンダンジョンズとリアルタイム通信 -クライアント編-ポコロンダンジョンズとリアルタイム通信 -クライアント編-
ポコロンダンジョンズとリアルタイム通信 -クライアント編-
 
SwiftでRiemann球面を扱う
SwiftでRiemann球面を扱うSwiftでRiemann球面を扱う
SwiftでRiemann球面を扱う
 
ICLR読み会 奥村純 20170617
ICLR読み会 奥村純 20170617ICLR読み会 奥村純 20170617
ICLR読み会 奥村純 20170617
 
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
言葉のもつ広がりを、モデルの学習に活かそう -one-hot to distribution in language modeling-
 
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @DenaICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
ICLR2017読み会 Data Noising as Smoothing in Neural Network Language Models @Dena
 
[ICLR2017読み会 @ DeNA] ICLR2017紹介
[ICLR2017読み会 @ DeNA] ICLR2017紹介[ICLR2017読み会 @ DeNA] ICLR2017紹介
[ICLR2017読み会 @ DeNA] ICLR2017紹介
 
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
Semi-Supervised Classification with Graph Convolutional Networks @ICLR2017読み会
 
医療データ解析界隈から見たICLR2017
医療データ解析界隈から見たICLR2017医療データ解析界隈から見たICLR2017
医療データ解析界隈から見たICLR2017
 
170614 iclr reading-public
170614 iclr reading-public170614 iclr reading-public
170614 iclr reading-public
 
Q prop
Q propQ prop
Q prop
 

Similar to TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門

ionic - cross platform mobile app 開発
ionic - cross platform mobile app 開発ionic - cross platform mobile app 開発
ionic - cross platform mobile app 開発Seunghun Lee
 
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouchC#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouchShin Ise
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化Takashi Okamoto
 
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツールMicrosoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツールYoshihisa Ozaki
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料OCHI Shuji
 
XPagesジャンプスタート
XPagesジャンプスタートXPagesジャンプスタート
XPagesジャンプスタートMitsuru Katoh
 
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介Mori Shingo
 
Xcode and iTC submission topics
Xcode and iTC submission topicsXcode and iTC submission topics
Xcode and iTC submission topicsSyo Ikeda
 
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!CData Software Japan
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)Akihiro Matsumura
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)Yoshiki Ushida
 
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop20120413 nestakabaneworkshop
20120413 nestakabaneworkshopYoichiro Sakurai
 
アイコンメモを支えるWeb技術
アイコンメモを支えるWeb技術アイコンメモを支えるWeb技術
アイコンメモを支えるWeb技術Makoto Setoh
 
iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術vaccho
 

Similar to TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門 (20)

T itanium概要
T itanium概要T itanium概要
T itanium概要
 
titanium_outline20111227
titanium_outline20111227titanium_outline20111227
titanium_outline20111227
 
ionic - cross platform mobile app 開発
ionic - cross platform mobile app 開発ionic - cross platform mobile app 開発
ionic - cross platform mobile app 開発
 
C#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouchC#でiPhoneアプリ開発 with MonoTouch
C#でiPhoneアプリ開発 with MonoTouch
 
Angular2実践入門
Angular2実践入門Angular2実践入門
Angular2実践入門
 
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
 
Microsoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツールMicrosoft Edge F12 開発者ツール
Microsoft Edge F12 開発者ツール
 
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
 
XPagesジャンプスタート
XPagesジャンプスタートXPagesジャンプスタート
XPagesジャンプスタート
 
XAML のこれまでとこれから、今「やる」べき意義
XAML のこれまでとこれから、今「やる」べき意義XAML のこれまでとこれから、今「やる」べき意義
XAML のこれまでとこれから、今「やる」べき意義
 
福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介福井スマートフォンハッカソン Titanium Mobileの紹介
福井スマートフォンハッカソン Titanium Mobileの紹介
 
Xcode and iTC submission topics
Xcode and iTC submission topicsXcode and iTC submission topics
Xcode and iTC submission topics
 
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
Angular でもっとAPIファースト・もっとモダンデザインなWebアプリケーションを作ろう!
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
Openshift 20191128
Openshift 20191128Openshift 20191128
Openshift 20191128
 
モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)モバイルアプリ開発最前線(PhoneGap)
モバイルアプリ開発最前線(PhoneGap)
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
 
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
 
アイコンメモを支えるWeb技術
アイコンメモを支えるWeb技術アイコンメモを支えるWeb技術
アイコンメモを支えるWeb技術
 
iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術iPhone/Android アプリをまとめて省エネ開発する技術
iPhone/Android アプリをまとめて省エネ開発する技術
 

More from Shumpei Shiraishi

コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術Shumpei Shiraishi
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶShumpei Shiraishi
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門Shumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るShumpei Shiraishi
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカShumpei Shiraishi
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでShumpei Shiraishi
 
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んでShumpei Shiraishi
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門Shumpei Shiraishi
 
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだことShumpei Shiraishi
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありきShumpei Shiraishi
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトShumpei Shiraishi
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んでShumpei Shiraishi
 
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」Shumpei Shiraishi
 
はやぶさ」からの贈り物
はやぶさ」からの贈り物はやぶさ」からの贈り物
はやぶさ」からの贈り物Shumpei Shiraishi
 

More from Shumpei Shiraishi (20)

俺的GEB概論(前半)
俺的GEB概論(前半)俺的GEB概論(前半)
俺的GEB概論(前半)
 
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
 
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶjQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカ
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
 
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
 
漫☆画太郎論
漫☆画太郎論漫☆画太郎論
漫☆画太郎論
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
 
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
 
はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありき
 
秒速一億円
秒速一億円秒速一億円
秒速一億円
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
 
この人と結婚していいの?を読んで
この人と結婚していいの?を読んでこの人と結婚していいの?を読んで
この人と結婚していいの?を読んで
 
20130921レジュメ2
20130921レジュメ220130921レジュメ2
20130921レジュメ2
 
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」
第62回 読書するエンジニアの会(テーマ:メカ) 「Prototyping lab」
 
はやぶさ」からの贈り物
はやぶさ」からの贈り物はやぶさ」からの贈り物
はやぶさ」からの贈り物
 

Recently uploaded

プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 

Recently uploaded (7)

プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 

TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門