＜オープニング 各種告知＞
6/1～3 AWS Summit Tokyo
＜東急ハンズのEC2の使いかた＞
緑本：Amazon Web Services 実践入門
AWSエキスパート養成本 今月発売予定
使い始めて３年経過
ハンズメッセ
→高負荷
→これをEC2で構成。
→Amazon Linux
POSサーバ
東芝テック制
Windows Server2008
→テックには、IAMユーザで運用保守。
メルマガ配信システム
RedHat Enterprize Linux 6
Oracle 11g
AWSブログ→無料、RSS登録が便利
公式(日本語)
AWS Black Belt Tech Webinar(無料)
→これをすべて理解すれば脱初心者
→EC2,EBS,VPC,S3
re:Invent
→セッションがyoutubeで公開されている。
＜Simple Front 53＞Sansan
Ｓ３
99.99999999999(イレブンナイン)
ログの保存
fluentdのS3 pluginで定期的に
応用例
→静的ウェブサイトホスティング+JavaScript+Congnito
CloudFront
便利なCDN
動的なコンテンツでも使うと良い
独自のDDoS監視システム
ウェブサイトのSSL/TLS対応
地域に応じた～～～
CDN
→キャッシュによるオリジンの負荷低減
コネクションの最適化
ウェブサイトのSSL/TLS対応
・CloudFront+S3で最強静的ウェブサイト
・HTTP/2未対応
→コーポレイトサイトとか。
無料でかつ更新不要。後ろにS3の構成。
低コストウェブサイト運用
同一URLでも国別のコンテンツを表示
(IPで判別)
AWS WAFとの統合
セキュリティ対策
WAF+CloudFront
Route 53(fifty three)
安くて手間いらずのDNSサービス
SLAで可用性１００％
DNSキャッシュサーバではない
AWS CLIでの管理は大変
→簡単操作ならマネージメントコンソール
→自動化はSDK利用がおすすめ
(JSON)
加重ラウンドロビン
＜ぎょりと学ぶAWS Billing+契約の学び方＞
オンプレミスで考えた時の構成
AWS事例みて試算する。
説明には企業名は書かない
AWS TCO で検索！
→比較
＜LT＞
インスタンスタイプ気をつけて！
slack情報を流した
----
緑本でインフラお勉強
→わかりやすい
----
構成図を書いて覚えよう！
→サービスの特性が掴める
AWS シンプルアイコン
Cacoo オンライン作成(無料で使える)
----
ビリングの章、おすすめ
NTTドコモではAWS使ってる
コスト問い合わせ多い。
----
＜AWS初心者がウェブサービス作ってみた結果ｗｗｗ〜主に失敗事例〜＞
デカケル.jp
アプリのデプロイ
→毎日変更
Elastic Beanstalkの良い点
→Git経由なのでバージョン管理きちんとできる
ストレージ
Wordpress
＜クロージング & 次回予告＞
2016年2月18日木曜日
2016年2月15日月曜日
JJUGナイトセミナー 「Java EE 7徹底入門」の著者が解説！ - Java EE 7特集 に行ってきた！
＜Java EE 7徹底入門 概要説明 (猪瀬さん)＞
書籍『Java EE 7徹底入門』著者
→サンプルアプリ作成できるので、今後活用してもよい。
.ear = .jar + .war
Java EE 7
→2013年
次世代フレームワーク
→検討する上で情報量が大切。
＜プレゼンテーション層の開発 JSF (加藤田さん)＞
(当時)Servletでは、入力チェックがないためOSS(struts等)を利用していた。
JSF構成要素
→フェースレット(画面)とマネージドビーン(処理)
XHTMLベースのテンプレートエンジン
JSF
→サニタイジングがデフォルト等。JSP進化版。
@Named フェースレットと連携しますよ～
@RequestScoped スコープの定義
本書で触れられなかった話
・JSFのより詳細な機能
→カスタムコンポーネント
イベントハンドリング
ビーンバリエーション
EL
・JavaEE 8(JSF2.3)
→WebSocket対応
マルチフィールドバリデーション
・MVC1.0
→アクション指向フレームワーク
JavaEE8で導入
JAX-RSを拡張(アノテーション同じ)
・JSF関連ライブラリ
プレゼンテーション層の選択肢
１．JSF
２．JAX-RS+クライアントサイドフレームワーク
３．MVC1.0＋Web Components?
どれを選んでいてもコンポーネント指向に収束。
→人間がイメージしやすいのかも。。
PrimeFaces
→Ajaxベース。100を超えるコンポーネント
OmniFaces
→JSF開発をサポートするユーティリティライブラリ
＜ビジネスロジック層の開発 CDI,EJB (羽生田さん)＞
CDIとEJBの組み合わせがよい。
CDI
→インジェクション、型解決、定義方法
→イベント処理
EJB
→解説。きちんと設計すれば
CDIコンテナの取り扱い
@ConversionXXXXX
CDIにおけるトランザクションの取り扱い
DI
→「層」をくっつける接着剤の役割
スコープ定義
@RequestScoped
@ViewScoped
@SessionScoped
@ApplicationScoped
@ConversationScoped → 開発者が明示的に決める事が可能
スコープ外になるとGC対象になるので。
CDI
→スコープ定義がわかれば使えるため、簡単。
層について
JSF⇔CDI⇔Entity
※ただし、CDIは実際は全ての層に入るはず
CDIコンテナ
・Weld
→バージョンは必ず認識(APサーバとの関連)すること。
環境によって動かないみたいなことがある。
Glassfish/Weld、Oracle Weblogic/Weld
・CDIコンテナへのアクセス用
→取得：CDI.current();
CDI.select(MyBean.class).get();とか
・CDI.current().toString();
→返却：Weld
・CDIProvider
・BeanManager
→面白い機能。
@Inject
BeanManager manager;
業務アプリで使いすぎると危険
過度の使いすぎ→FW化→障害調査が大変
・大規模開発だと勝手インジェクションとか。。。
@ConversationScoped
・自分でスコープ長を定義
・begin()→end()
トランザクション
・javax.transactionパッケージ
・@Transactional
→トランザクション境界の設定
→クラスとメソッドどちらでも
・@TransactionScoped
CDI＋EJB
→ルール決めが大切
多量のインジェクション数は危険
→課題。フレームワークで制御しようとすると本末転倒になりそう。
だから設計大事。
＜バッチアプリケーションの開発 jBatch (猪瀬さん)＞
JavaEE7から登場
Spring Batchから多く継承
JSR-352で規定
１．プロセスとして実行
○ シンプル。直感的。
△ JVM起動時間のオーバーヘッド。CPU浪費。
△ APサーバで動く他の部品との共有が難しい
２．自作スレッドとして実行
○ スレッドはプロセスに比べて軽く起動
△ スレッド管理するmainプログラムを自作必要
△ APサーバで動く他の部品との共有が難しい
３．サーブレットとして実行
○ スレッドはプロセスに比べて軽く起動
○ スレッド管理プログラムの自作不要
○ APサーバ部品との共有OK
△ 実行状況の把握、スレッド停止が難しい
△ HTTPリクエストタイムアウトの問題
４．jBatchを利用
○ スレッドはプロセスに比べて軽く起動
○ スレッド管理プログラムの自作不要
○ APサーバ部品との共有OK
○ 実行状況の確認OK
ジョブとステップ
→ジョブ(xml)はステップの入れ物
JCLっぽい。
ジョブオペレータ
ステップ
→『チャンク型』『バッチレット型』
→チャンク型：一括処理
I/O減らす仕組み(10回に1回書き込み)
補助機能
・リスナ
・コンテキスト
→JobContextとStepContext
・メトリック
→Stepに関する統計情報
書籍『Java EE 7徹底入門』著者
→サンプルアプリ作成できるので、今後活用してもよい。
.ear = .jar + .war
Java EE 7
→2013年
次世代フレームワーク
→検討する上で情報量が大切。
＜プレゼンテーション層の開発 JSF (加藤田さん)＞
(当時)Servletでは、入力チェックがないためOSS(struts等)を利用していた。
JSF構成要素
→フェースレット(画面)とマネージドビーン(処理)
XHTMLベースのテンプレートエンジン
JSF
→サニタイジングがデフォルト等。JSP進化版。
@Named フェースレットと連携しますよ～
@RequestScoped スコープの定義
本書で触れられなかった話
・JSFのより詳細な機能
→カスタムコンポーネント
イベントハンドリング
ビーンバリエーション
EL
・JavaEE 8(JSF2.3)
→WebSocket対応
マルチフィールドバリデーション
・MVC1.0
→アクション指向フレームワーク
JavaEE8で導入
JAX-RSを拡張(アノテーション同じ)
・JSF関連ライブラリ
プレゼンテーション層の選択肢
１．JSF
２．JAX-RS+クライアントサイドフレームワーク
３．MVC1.0＋Web Components?
どれを選んでいてもコンポーネント指向に収束。
→人間がイメージしやすいのかも。。
PrimeFaces
→Ajaxベース。100を超えるコンポーネント
OmniFaces
→JSF開発をサポートするユーティリティライブラリ
＜ビジネスロジック層の開発 CDI,EJB (羽生田さん)＞
CDIとEJBの組み合わせがよい。
CDI
→インジェクション、型解決、定義方法
→イベント処理
EJB
→解説。きちんと設計すれば
CDIコンテナの取り扱い
@ConversionXXXXX
CDIにおけるトランザクションの取り扱い
DI
→「層」をくっつける接着剤の役割
スコープ定義
@RequestScoped
@ViewScoped
@SessionScoped
@ApplicationScoped
@ConversationScoped → 開発者が明示的に決める事が可能
スコープ外になるとGC対象になるので。
CDI
→スコープ定義がわかれば使えるため、簡単。
層について
JSF⇔CDI⇔Entity
※ただし、CDIは実際は全ての層に入るはず
CDIコンテナ
・Weld
→バージョンは必ず認識(APサーバとの関連)すること。
環境によって動かないみたいなことがある。
Glassfish/Weld、Oracle Weblogic/Weld
・CDIコンテナへのアクセス用
→取得：CDI.current();
CDI.select(MyBean.class).get();とか
・CDI.current().toString();
→返却：Weld
・CDIProvider
・BeanManager
→面白い機能。
@Inject
BeanManager manager;
業務アプリで使いすぎると危険
過度の使いすぎ→FW化→障害調査が大変
・大規模開発だと勝手インジェクションとか。。。
@ConversationScoped
・自分でスコープ長を定義
・begin()→end()
トランザクション
・javax.transactionパッケージ
・@Transactional
→トランザクション境界の設定
→クラスとメソッドどちらでも
・@TransactionScoped
CDI＋EJB
→ルール決めが大切
多量のインジェクション数は危険
→課題。フレームワークで制御しようとすると本末転倒になりそう。
だから設計大事。
＜バッチアプリケーションの開発 jBatch (猪瀬さん)＞
JavaEE7から登場
Spring Batchから多く継承
JSR-352で規定
１．プロセスとして実行
○ シンプル。直感的。
△ JVM起動時間のオーバーヘッド。CPU浪費。
△ APサーバで動く他の部品との共有が難しい
２．自作スレッドとして実行
○ スレッドはプロセスに比べて軽く起動
△ スレッド管理するmainプログラムを自作必要
△ APサーバで動く他の部品との共有が難しい
３．サーブレットとして実行
○ スレッドはプロセスに比べて軽く起動
○ スレッド管理プログラムの自作不要
○ APサーバ部品との共有OK
△ 実行状況の把握、スレッド停止が難しい
△ HTTPリクエストタイムアウトの問題
４．jBatchを利用
○ スレッドはプロセスに比べて軽く起動
○ スレッド管理プログラムの自作不要
○ APサーバ部品との共有OK
○ 実行状況の確認OK
ジョブとステップ
→ジョブ(xml)はステップの入れ物
JCLっぽい。
ジョブオペレータ
ステップ
→『チャンク型』『バッチレット型』
→チャンク型：一括処理
I/O減らす仕組み(10回に1回書き込み)
補助機能
・リスナ
・コンテキスト
→JobContextとStepContext
・メトリック
→Stepに関する統計情報
2016年2月10日水曜日
第31回PaaS勉強会に行ってきました
１．microPCF を使ってみよう(hiroakiukaji さん)
Cloud Foundryの完全自力運用はつらい、らしい。
BOSH 分散システム構成管理ツール
→これもつらい、らしい。便利だが学習コスト高い。
Cloud Foundry All-in-Oneの一つ
→microPCF
microPCF
→Cloud Foundry構築ツール
3stepでお試しできた。
以下を比較。
bosh-lite
cf_nise_installer
microPCF
２．runC について(yo_ さん)
Dockerの周辺事情
→centOSからいじめられた。。
→OCI発足(コンテナの標準仕様を議論・策定する団体)
DockerとrunCの技術的関係
runC 必要なこと
→Go言語がコンパイルできる。
３．OneOps の仕組みと使い方(jacopen さん)
http://www.publickey1.jp/
Walmartと言えば
→50兆円くらいの売上高
OneOps
→OSS。Walmart Labsが開発
→JavaとRubyで書かれている。Chefも使っている。
→Cloud Formationに近い。
必要な構成を生成してくれる。
→本当に成熟してくるとインフラエンジニアの役割は確実に変化していく。
複数のCloudの比率を設定して、生成ができる。
→AWS:Azure 3:1みたいに。
openShift等とは違う。
４．今さら Cloud Foundry 百日行振り返り(nota-ja さん)
http://blog.cloudfoundry.gr.jp/2015/06/cf100apps-000.html
Buildpacks
unicale カレンダーアプリ
５．cf-containers-broker を使ってローカル環境もサービスの恩恵をうける(morika-t さん)
NTTソフト Cloud Foudry
http://www.slideshare.net/morika-t/cfcontainersbroker-58094120
６．Lattice でコンテナ間通信 その2(shinohara_kenta さん)
Dockerではコンテナ間通信の仕組みたくさん
Cloud Foundryの完全自力運用はつらい、らしい。
BOSH 分散システム構成管理ツール
→これもつらい、らしい。便利だが学習コスト高い。
Cloud Foundry All-in-Oneの一つ
→microPCF
microPCF
→Cloud Foundry構築ツール
3stepでお試しできた。
以下を比較。
bosh-lite
cf_nise_installer
microPCF
２．runC について(yo_ さん)
Dockerの周辺事情
→centOSからいじめられた。。
→OCI発足(コンテナの標準仕様を議論・策定する団体)
DockerとrunCの技術的関係
runC 必要なこと
→Go言語がコンパイルできる。
３．OneOps の仕組みと使い方(jacopen さん)
http://www.publickey1.jp/
Walmartと言えば
→50兆円くらいの売上高
OneOps
→OSS。Walmart Labsが開発
→JavaとRubyで書かれている。Chefも使っている。
→Cloud Formationに近い。
必要な構成を生成してくれる。
→本当に成熟してくるとインフラエンジニアの役割は確実に変化していく。
複数のCloudの比率を設定して、生成ができる。
→AWS:Azure 3:1みたいに。
openShift等とは違う。
４．今さら Cloud Foundry 百日行振り返り(nota-ja さん)
http://blog.cloudfoundry.gr.jp/2015/06/cf100apps-000.html
Buildpacks
unicale カレンダーアプリ
５．cf-containers-broker を使ってローカル環境もサービスの恩恵をうける(morika-t さん)
NTTソフト Cloud Foudry
http://www.slideshare.net/morika-t/cfcontainersbroker-58094120
６．Lattice でコンテナ間通信 その2(shinohara_kenta さん)
Dockerではコンテナ間通信の仕組みたくさん
2016年1月31日日曜日
Git入門に行ってきました
＜はじめの一歩＞Java女子部 部長さん
主にはバージョン管理
Gitは、分散バージョン管理システム
→集中管理だとプロジェクト全体へ影響する。
→ローカル環境で作業を継続できる。
クローン
→既に使いたいGitリポジトリが存在する場合
（途中から参画したとき）
作成
→新規作成
リモートのデフォルトは、originという。
pull
→作業中のファイルを変更
fetch
→この段階では作業中ファイルは更新されず、
mergeすると反映される。
デフォルトのブランチ名はmaster
作業中のブランチをHEAD
→そのあと統合したい。
→①マージ②リベース
→リベースは今までの経緯が1本化
□よく使うコマンド
git log 歴史の確認
→たくさんオプションあり。
git diff 差分の確認
git tag 歴史の名前付け
→ある地点にすぐ戻れる
□初心者、あるある
１．余計なファイルをコミット
例)eclipse固有のファイル、jarとか
→.gitignoreファイルを作成する
https://github.com/github/gitignore
２．GitとGitHubを混同
→GitHub：Gitを使った共有Webサービス
３．コンフリクト恐怖症
→衝突
□困ったときのTips(コマンド)
やりたいこと
コマンド
===============================
①直前のマージを取り消そう
git merge --abort
②コミット取り消し
git revert
git reset（履歴も残さない。なかったことに）
③直前のコミットを編集しよう
git command --amend（コミットやり直し）
④どうしたら戻せるか確認しよう ★おススメ
git status
⑤最後の望み
git reflog
→GitのGCが動くとログ消えるので要注意！
===============================
Git勉強方法
→イメージ大事
全体フローのどの部分を操作しているかを認識する
Pro Git
https://progit-ja.github.io/#download
＜Git実践入門＞TIS社4年目
金融系PJで導入
GitBucket,Jenkins(CI),artifactory(maveリポジトリ)
→全部無料
開発PCからGitBucketの流れ
→インストール簡単。GitHubに似ている。
まめにバックアップ
→有償ツール検討
https://www.gitbook.com/book/uga/mastering-builder/details
プロジェクトで導入するときには
・ガイドを用意する
・デモをする
川島さん
→ギットクエスト
主にはバージョン管理
Gitは、分散バージョン管理システム
→集中管理だとプロジェクト全体へ影響する。
→ローカル環境で作業を継続できる。
クローン
→既に使いたいGitリポジトリが存在する場合
（途中から参画したとき）
作成
→新規作成
リモートのデフォルトは、originという。
pull
→作業中のファイルを変更
fetch
→この段階では作業中ファイルは更新されず、
mergeすると反映される。
デフォルトのブランチ名はmaster
作業中のブランチをHEAD
→そのあと統合したい。
→①マージ②リベース
→リベースは今までの経緯が1本化
□よく使うコマンド
git log 歴史の確認
→たくさんオプションあり。
git diff 差分の確認
git tag 歴史の名前付け
→ある地点にすぐ戻れる
□初心者、あるある
１．余計なファイルをコミット
例)eclipse固有のファイル、jarとか
→.gitignoreファイルを作成する
https://github.com/github/gitignore
２．GitとGitHubを混同
→GitHub：Gitを使った共有Webサービス
３．コンフリクト恐怖症
→衝突
□困ったときのTips(コマンド)
やりたいこと
コマンド
===============================
①直前のマージを取り消そう
git merge --abort
②コミット取り消し
git revert
git reset（履歴も残さない。なかったことに）
③直前のコミットを編集しよう
git command --amend（コミットやり直し）
④どうしたら戻せるか確認しよう ★おススメ
git status
⑤最後の望み
git reflog
→GitのGCが動くとログ消えるので要注意！
===============================
Git勉強方法
→イメージ大事
全体フローのどの部分を操作しているかを認識する
Pro Git
https://progit-ja.github.io/#download
＜Git実践入門＞TIS社4年目
金融系PJで導入
GitBucket,Jenkins(CI),artifactory(maveリポジトリ)
→全部無料
開発PCからGitBucketの流れ
→インストール簡単。GitHubに似ている。
まめにバックアップ
→有償ツール検討
https://www.gitbook.com/book/uga/mastering-builder/details
プロジェクトで導入するときには
・ガイドを用意する
・デモをする
川島さん
→ギットクエスト
2015年7月18日土曜日
【第2回】(2015.7.17)JAWS-UG初心者支部 箇条書きメモ
mediba社 ヒカリエ31階
■アカウントつくってはじめること
(本番環境)セキュリティと請求
セキュリティ
(本番環境)セキュリティと請求
セキュリティ
クラウドtrailの有効化
→APIログとれるもの。
例…権限強い人がログインすると通知とばすとかできる。
→通知することで抑止になる
＜注意＞
→すべてに対応していない。
→設計不十分だと意味をなさない。
→メールとパスワードだけの認証だと弱い
→APIログとれるもの。
例…権限強い人がログインすると通知とばすとかできる。
→通知することで抑止になる
＜注意＞
→すべてに対応していない。
→設計不十分だと意味をなさない。
→メールとパスワードだけの認証だと弱い
MFA
→認証強化。カード型とかある。
→スマホのワンタイムパスワード
→認証強化。カード型とかある。
→スマホのワンタイムパスワード
パスワード知っている人とトークン知っている人をわける
IAMユーザとグループ
権限はJSON形式で書くことが可能
→権限を制御できるため、被害を最小限にできる。オペミスの予防
※共有は絶対だめ
パスワードポリシー変更すべき
権限はJSON形式で書くことが可能
→権限を制御できるため、被害を最小限にできる。オペミスの予防
※共有は絶対だめ
パスワードポリシー変更すべき
IAMユーザ 請求アクセス制御
→IAMユーザに参照権限を簡単につけれる
→IAMユーザに参照権限を簡単につけれる
支払通貨の変更
→円にできる。今までは手数料がかかっていた。
→簡単にできる。
→円にできる。今までは手数料がかかっていた。
→簡単にできる。
請求の通知設定
→メールで受けとることが可能
→メールで受けとることが可能
タグつけてもきちんと機能しないものがある。
予算
→月の予算設定。
→細かいメッシュで管理できる
→(コスト高の)原因が分かりやすい
→月の予算設定。
→細かいメッシュで管理できる
→(コスト高の)原因が分かりやすい
Trusted adviser
→そもそも何をチェックすればよいか不明なときに。
→リソース状態は分からない
→そもそも何をチェックすればよいか不明なときに。
→リソース状態は分からない
■脱初心者
色んな初心者
どこまでできればOK!?
色んな初心者
どこまでできればOK!?
スコアから分かるのがTOEIC
認定資格あり
認定資格あり
デベロッパ&SysOpsがおすすめ
ラウンジ利用可、名刺にロゴつける
ラウンジ利用可、名刺にロゴつける
運転免許&パスポートが最強
活用資料集
Black ～
サンプル問題
Black ～
サンプル問題
オンラインで模擬あり。自宅でも可。
セルフベースラポ
→にへいさん資料
セルフベースラポ
→にへいさん資料
ナレッジセンター
→FAQ。英語
→FAQ。英語
CDP
本
→クラウドデザインパターン設計ガイド 改訂版
→パターン別構築・運用
本
→クラウドデザインパターン設計ガイド 改訂版
→パターン別構築・運用
インフラ苦手
→3分間ネットワーク基礎講座
→インフラデザインパターン
→webエンジニアが知って
→3分間ネットワーク基礎講座
→インフラデザインパターン
→webエンジニアが知って
とにかく触る
→分からないものはすぐ調べる
→分からないものはすぐ調べる
合格を目標としない。
→仕事に活かすため。資格はツール。
実力を確認するツール。
→仕事に活かすため。資格はツール。
実力を確認するツール。
■失敗例 mediba(auスマートパスとか)
オンプレと同じ構成はアンチパターン
オートスケーリング自体には課金ないので、入れるべき。
オンプレと同じ構成はアンチパターン
オートスケーリング自体には課金ないので、入れるべき。
サービス、機能毎にマイクロサービス
可能ならマネージドサービス。
AWSではインスタンスは落ちて当たり前。(クラウド)
マルチAZは当然。
マルチAZは当然。
インスタンス情報が立て直す度にかわる。
iPはEla～をつかう
iPはEla～をつかう
オンプレ脳から脱却！
やってみなきゃわからないが容易。
コミュニティが活発
コミュニティが活発
**** ここからスピーカの話しに夢中でメモなし。。。
AWSの勉強会に初参加！
まずは第1歩を踏み出せました。
**********
JAWS−UG 初心者支部: 第１回JAWS-UG初心者支部を開催しました！: みなさま、こんにちは。 JAWS-UG初心者支部もブログを立ち上げました！ ここでは、イベントの告知や、開催情報などなどを共有していければと思っています。 さて、記念すべき第１号のネタは、去る５月１４日（木）に開催されました、JAWS-UG初心者支部の開催レポートです。...
**********
JAWS−UG 初心者支部: 第１回JAWS-UG初心者支部を開催しました！: みなさま、こんにちは。 JAWS-UG初心者支部もブログを立ち上げました！ ここでは、イベントの告知や、開催情報などなどを共有していければと思っています。 さて、記念すべき第１号のネタは、去る５月１４日（木）に開催されました、JAWS-UG初心者支部の開催レポートです。...
2015年2月7日土曜日
HTML5が開く新しい未来予想図（II）
参加したセミナーや勉強会メモを箇条書きで残しておきます。
１．開会・キーノート、ちょっと気になるタグの話前半）
中島 俊治氏(主催)
ＨＴＭＬ５
→デザイン要素なくなってきた。
文章の構造
ＣＳＳ３
→リッチ、アニメ、三次元
ＪａｖａＳｃｒｉｐｔ
→メイン(とても使う)
双方向性(人⇔システム)
ＩＴＦ？！
ドローン
ＡＰＩ＞Ｗｅｂブラウザを越える
→業務アプリになる。
２．Do you know HTML5 and FrontEnd？
山崎 大助先生
ヒカラボ。
パソナテック。
G's ACADEMY TOKYO
セカイを変えるGEEK(クリエーター)になろう
→授業料後払い
レスポンシブル
～２８歳 アパレル
→ここ１０年でＨＴＭＬ５
→過労で入院、解雇。
→自分にスキルを身につけないといけない(危機感)
「いつでも変われる。今日から変われる！」
トレンド
①universions
②milkcocoa ← 簡単。おすすめ。
Git、ユニマット
①チャット、バージョン管理、裏はGit
小さいところ(※)はねらい目
※学校とか。ファイル名でバージョン管理している。
例）yyyymmdd.war みたいに。
②リアルタイム通信
WebSocket、JavaScript
→メッセンジャー作れる
勧告されたので、、
ＨＴＭＬ５はＨＴＭＬになった。
無印良品サイトはよくできている
→ソースは参考になるはず。
ＨＴＭＬ５
→アプリになった
ア．セマンティックな構造
→要はソースから画面イメージが分かる
HTML5以前 ： <div id="time">～
※IDを工夫して可読性あげている
HTML5 ： <time>～
※要素みれば、時間に関するものだとわかる
イ．ＡＰＩ豊富
Local Storage
Web Storage
→ブラウザを落としても保存される
(簡易DB)
参考サイト
http://fmbip.com/litmus/
http://mobilehtml5.org/
フロントエンド エンジニア(HTML,CSS,JavaScript)
バックエンド エンジニア(PHP,Perl)
【今まで】
「デスクトップ ファースト(ＵＩ優先)」
ＰＣ向けをつくって、それを他デバイスでも参照できるように
展開する。
【これから】
「モバイル ファースト(ＵＩ/ＵＸ)」
今どき帰宅してからＰＣ開かない。
→スマホサイトでは、サクサク動くことが大切
すなわちＵＸ(操作性、パフォーマンス)
→奇抜は不要。
フレームワーク
bootstamp
JavaScriptできると幅広がる
コード簡素化
<input type="date">
→これだけカレンダー
ブラウザへのデータ保存
→スマートデバイスでも？！
ビデオ要素を使って字幕を入れることも可能
翻訳アプリも自分で作成可能
端末→(文字データ)→ＡＰＩ
ＡＰＩ→(音楽データ、映像データ)→端末
ファイルＡＰＩ
→ブラウザから画像編集、ＤＬ可能
『作りながら学ぶ』
３．HTML5が創りだす新たな世界
成井 弦理事長
すべてはＨＴＭＬ５になる(日経コンピューター)
HTML変革
4.01:文書閲覧
↓
5 :アプリ実行環境
ワンソース・マルチユース
マルチデバイス
基幹系
→様々なデバイス
社内システムでも対応が迫られている
Oracle Java7
→HTML5採用
SAPもHTML対応
SAP Fiori
今後、Java → JavaScript,HTML5
楽天 HTML5
WPO html5
→YouTube
0.x秒遅くなれば、客が逃げる
kendo UI データ可視化もHTML5
データの見せ方が大切。
→グラフなどもHTMLにすることで
ダイナミックに変化して見せることが可能
医療の可視化もHTML5
WebGL(webgl)
→openglのサブセット
→いろんなことができる
本格的な3D CGもHTML5で可能
http://helloracer.com/webgl
TVもHTML5対応
hybridキャスト
→すべての民放
スポンサー集めに苦労
オリンピック時には、皆HTML5対応TVを
見てるのでは・・・
バックエンド⇔(HTML5)⇔フロントエンド
４．ちょっと気になるタグの話後半・閉会
中島 俊治氏
ハイコンセプト
知識は点、開発は線。
線が増えれば面になる。
editable
→HPもそのまま変更可能
FireFox → 安い。世界で拡大
メールアドレスのチェックもクライアントサイドで可能
→ただし、過信は禁物。
＊＊ 講師プロフィール(dots.より抜粋) ＊＊
中島 俊治先生
放送大学面接授業「HTML5入門」非常勤講師
ソフトバンク入社。GeoCities JAPAN一号社員として立上従事、
Yahoo! JAPANなどのベンチャ企業ののち、独立。
現在は大学・短大、企業研修、PCスクール、
そしてHTML5アカデミック認定校「東京アプリ･ワークショップ」での
HTML5、Webアニメーションなどの講師。
HTML5プロフェッショナル認定資格レベル１・レベル２取得。
マイクロソフトMVP2014受賞。
山崎 大助先生
デジタルハリウッド大学大学院・デジタルハリウッドオンラインスクール講師
「数々のIT系メディアに登場し、２年連続 Microsoft MVP（Bing Maps Development）
に選ばれた業界最前線で活躍するクリエイター」、
アジアで唯一（世界９人中の１名）のMicrosoftMVP（BingMapsDevelopment）として、
Bing関連のAPIだけでなく、HTML5やWeb関連技術の普及に尽力している。
IT系メディアでの寄稿、書籍の執筆など、ヒカ☆ラボなど他のセミナーやイベントでも活動。最近では「HTML5アプリ作ろうぜ！」の連載で人気を集めている。
成井 弦理事長（ゲスト）
特定非営利活動法人 LPI-Japan 理事長
現在のインターネットの元になる分散処理を普及させた
DEC (Digital Equipment Corporation)に入社。米国DECの副社長を経た後に
CG (Computer Graphic)で有名になったSilicon Graphics (SGI) Japanに入社。
SGIにてIT＋Creativeな世界を経験。代表取締役副社長時代にLPI-Japanを設立、
現在に至る。
（LPI-JapanはLinux, PostgreSQL (OSS-DB), HTML5プロフェショナルの認定を行うNPO.）
１．開会・キーノート、ちょっと気になるタグの話前半）
中島 俊治氏(主催)
ＨＴＭＬ５
→デザイン要素なくなってきた。
文章の構造
ＣＳＳ３
→リッチ、アニメ、三次元
ＪａｖａＳｃｒｉｐｔ
→メイン(とても使う)
双方向性(人⇔システム)
ＩＴＦ？！
ドローン
ＡＰＩ＞Ｗｅｂブラウザを越える
→業務アプリになる。
２．Do you know HTML5 and FrontEnd？
山崎 大助先生
ヒカラボ。
パソナテック。
G's ACADEMY TOKYO
セカイを変えるGEEK(クリエーター)になろう
→授業料後払い
レスポンシブル
～２８歳 アパレル
→ここ１０年でＨＴＭＬ５
→過労で入院、解雇。
→自分にスキルを身につけないといけない(危機感)
「いつでも変われる。今日から変われる！」
トレンド
①universions
②milkcocoa ← 簡単。おすすめ。
Git、ユニマット
①チャット、バージョン管理、裏はGit
小さいところ(※)はねらい目
※学校とか。ファイル名でバージョン管理している。
例）yyyymmdd.war みたいに。
②リアルタイム通信
WebSocket、JavaScript
→メッセンジャー作れる
勧告されたので、、
ＨＴＭＬ５はＨＴＭＬになった。
無印良品サイトはよくできている
→ソースは参考になるはず。
ＨＴＭＬ５
→アプリになった
ア．セマンティックな構造
→要はソースから画面イメージが分かる
HTML5以前 ： <div id="time">～
※IDを工夫して可読性あげている
HTML5 ： <time>～
※要素みれば、時間に関するものだとわかる
イ．ＡＰＩ豊富
Local Storage
Web Storage
→ブラウザを落としても保存される
(簡易DB)
参考サイト
http://fmbip.com/litmus/
http://mobilehtml5.org/
フロントエンド エンジニア(HTML,CSS,JavaScript)
バックエンド エンジニア(PHP,Perl)
【今まで】
「デスクトップ ファースト(ＵＩ優先)」
ＰＣ向けをつくって、それを他デバイスでも参照できるように
展開する。
【これから】
「モバイル ファースト(ＵＩ/ＵＸ)」
今どき帰宅してからＰＣ開かない。
→スマホサイトでは、サクサク動くことが大切
すなわちＵＸ(操作性、パフォーマンス)
→奇抜は不要。
フレームワーク
bootstamp
JavaScriptできると幅広がる
コード簡素化
<input type="date">
→これだけカレンダー
ブラウザへのデータ保存
→スマートデバイスでも？！
ビデオ要素を使って字幕を入れることも可能
翻訳アプリも自分で作成可能
端末→(文字データ)→ＡＰＩ
ＡＰＩ→(音楽データ、映像データ)→端末
ファイルＡＰＩ
→ブラウザから画像編集、ＤＬ可能
『作りながら学ぶ』
３．HTML5が創りだす新たな世界
成井 弦理事長
すべてはＨＴＭＬ５になる(日経コンピューター)
HTML変革
4.01:文書閲覧
↓
5 :アプリ実行環境
ワンソース・マルチユース
マルチデバイス
基幹系
→様々なデバイス
社内システムでも対応が迫られている
Oracle Java7
→HTML5採用
SAPもHTML対応
SAP Fiori
今後、Java → JavaScript,HTML5
楽天 HTML5
WPO html5
→YouTube
0.x秒遅くなれば、客が逃げる
kendo UI データ可視化もHTML5
データの見せ方が大切。
→グラフなどもHTMLにすることで
ダイナミックに変化して見せることが可能
医療の可視化もHTML5
WebGL(webgl)
→openglのサブセット
→いろんなことができる
本格的な3D CGもHTML5で可能
http://helloracer.com/webgl
TVもHTML5対応
hybridキャスト
→すべての民放
スポンサー集めに苦労
オリンピック時には、皆HTML5対応TVを
見てるのでは・・・
バックエンド⇔(HTML5)⇔フロントエンド
４．ちょっと気になるタグの話後半・閉会
中島 俊治氏
ハイコンセプト
知識は点、開発は線。
線が増えれば面になる。
editable
→HPもそのまま変更可能
FireFox → 安い。世界で拡大
メールアドレスのチェックもクライアントサイドで可能
→ただし、過信は禁物。
＊＊ 講師プロフィール(dots.より抜粋) ＊＊
中島 俊治先生
放送大学面接授業「HTML5入門」非常勤講師
ソフトバンク入社。GeoCities JAPAN一号社員として立上従事、
Yahoo! JAPANなどのベンチャ企業ののち、独立。
現在は大学・短大、企業研修、PCスクール、
そしてHTML5アカデミック認定校「東京アプリ･ワークショップ」での
HTML5、Webアニメーションなどの講師。
HTML5プロフェッショナル認定資格レベル１・レベル２取得。
マイクロソフトMVP2014受賞。
山崎 大助先生
デジタルハリウッド大学大学院・デジタルハリウッドオンラインスクール講師
「数々のIT系メディアに登場し、２年連続 Microsoft MVP（Bing Maps Development）
に選ばれた業界最前線で活躍するクリエイター」、
アジアで唯一（世界９人中の１名）のMicrosoftMVP（BingMapsDevelopment）として、
Bing関連のAPIだけでなく、HTML5やWeb関連技術の普及に尽力している。
IT系メディアでの寄稿、書籍の執筆など、ヒカ☆ラボなど他のセミナーやイベントでも活動。最近では「HTML5アプリ作ろうぜ！」の連載で人気を集めている。
成井 弦理事長（ゲスト）
特定非営利活動法人 LPI-Japan 理事長
現在のインターネットの元になる分散処理を普及させた
DEC (Digital Equipment Corporation)に入社。米国DECの副社長を経た後に
CG (Computer Graphic)で有名になったSilicon Graphics (SGI) Japanに入社。
SGIにてIT＋Creativeな世界を経験。代表取締役副社長時代にLPI-Japanを設立、
現在に至る。
（LPI-JapanはLinux, PostgreSQL (OSS-DB), HTML5プロフェショナルの認定を行うNPO.）
登録:
コメント (Atom)