Downloaded 12 times
![[html5jロボット部 第7回勉強会] Microsoft Cognitive Toolkit (CNTK) Overview](https://cdn.slidesharecdn.com/ss_thumbnails/20161130cognitivetoolkit-161130233503-thumbnail.jpg?width=640&height=640&fit=bounds)
![[CB16] Electron - Build cross platform desktop XSS, it’s easier than you thin...](https://cdn.slidesharecdn.com/ss_thumbnails/cb16hasegawaja-161109050840-thumbnail.jpg?width=640&height=640&fit=bounds)
Electron を知る
- 1. Electron を知る 2015.12.20 めとべや東京#10 @tomoya_shibata
- 2.
- 3. I’m - バトルプログラマー柴田智也 @tomoya_shibata - 今すぐdon’t follow me - 求職中 Like - html, AltCSS, JS, C#, Java… - フロント寄り、Java は仕事専門 Dislike おまえはだれだ
- 4. I’m - バトルプログラマー柴田智也 @tomoya_shibata - 今すぐdon’t follow me - 求職中 Like - html, AltCSS, JS, C#, Java… - フロント寄り、Java は仕事専門 Dislike - JS, JS それと JS とかいう言語 おまえはだれだ
- 5. I’m - バトルプログラマー柴田智也 @tomoya_shibata - 今すぐdon’t follow me - 求職中 Like - html, AltCSS, JS, C#, Java… - フロント寄り、Java は仕事専門 Dislike - JS, JS それと JS おまえはだれだ 普段の様子
- 7.
- 8.
- 9.
- 10.
- 11. MS の素晴らしい C# MSの素晴らしい .NET MS の素晴らしい WPF や UWP MS の素晴らしい Windows Forms 話すこと、話さないこと
- 12. MS の素晴らしい C# MSの素晴らしい .NET MS の素晴らしい WPF や UWP MS の素晴らしい Windows Forms 話すこと、話さないお子と を一切話しません
- 13. MS の素晴らしい C# MSの素晴らしい .NET MS の素晴らしい WPF や UWP MS の素晴らしい Windows Forms 話すこと、話さないお子と を一切話しません
- 14.
- 15.
- 16.
- 17. - デスクトップアプリケーションプラットフォーム - html,CSS, JS という基本 WEB スキルで開発 - GitHub 開発 - node.js + Chromium ランタイム → 雑に言うと GoogleChrome だけに提供する感覚で開発できる → node.js の恩恵も受けられる Electron ってなーんだ 昔は Atom Shell って名前だったよ
- 18.
- 19. ～今まで～ 「Windows でデスクトップアプリなら WPF/UWP」 ～最近～ 「Windowsでデスクトップアプリなら WPF/UWP あと、Electron」 Electron ってなーんだ
- 20. ～今まで～ 「Windows でデスクトップアプリなら WPF/UWP」 ～最近～ 「Windowsでデスクトップアプリなら WPF/UWP あと、Electron」 Electron ってなーんだ 選択肢の変化
- 21. ～今まで～ 「Windows でデスクトップアプリなら WPF/UWP」 ～最近～ 「Windowsでデスクトップアプリなら WPF/UWP あと、Electron」 Electron ってなーんだ 選択肢の変化 1 Source for All OS
- 22.
- 23.
- 24. Q. 似ているので NW.js(旧node-webkit) ってのがあるよ？ A. ごめんなさい！ よく知りません！ - 観測している限り勢いがあるのは Electron - ｳｪｯﾌﾞ業界の流行（要出典）はアテにならんので眉唾 - エントリポイントが html なのが NW.js - エントリポイントが JS なのが Electron - 利用者が多い → 情報も多い（日本語も） Electron ってなーんだ
- 25.
- 26.
- 27. Atom - GitHub 開発テキストエディタ どこで使われてるの
- 28. Slack for Windows -ChatWorks と並んで人気のチャットツール どこで使われてるの
- 29. Kobito for Windows -Increments 開発 - Markdown エディタ - Qiita 連携 どこで使われてるの
- 30. Visual Studio Code -説明不要 - ググラビリティの低さで有名 どこで使われてるの
- 31. ほか一覧 - Nuclide (Facebook開発 IDE) - N1 (Nylas 開発 メールクライアント) - GitKraken (axosoft 開発 Git クライアント) - 名称自粛 (個人開発 艦これ専用ブラウザ） → すごく既視感のある UI なんだけど…。 どこで使われてるの
- 32.
- 33. どこで使われてるの 番外 https://github.com/sindresorhus/awesome-electron - Electron採用 アプリ - Electron 用ツール - ドキュメント - コミュニティ などを紹介している
- 34.
- 35.
- 36. 題材は MarkdownPreview ってツール Reactとﾓｯﾀﾞｰﾝ JS(ES6) を学ぶために作ってます Electron へライブ移植 https://github.com/tomoyashibata/MarkdownPreview ES6 ×
- 37.
- 38.
- 39. - 自動更新 - ダイアログ -描画プロセスとメインプロセスの通信 - メニュー - トレイ（通知領域のアレ） - クリップボード - ファイルをドラッグアンドドロップできる（独自タグ） - Windows 8 からのトースト通知 ほかにもいろいろあるぞい 補足：API たち
- 40.
- 41.
- 42.
- 43. 大好き中華フォントが来日。 - CSS とかでfont-family 指定してないとこうなる 知見と注意
- 44.
- 45. DirectWrite の有効、無効設定 - 文字を綺麗にレンダリングするためのもの…のはず -日本語だと目も当てられない状態になることが - GoogleChrome で無効化している人も 知見と注意 web-preferences.direct-write に真偽値を渡してオンオフ
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. - 公式以外のソースに前提スキルセットが多すぎることが - Electronそのものではなく、JS 界隈の問題 知見と注意
- 53. - 公式以外のソースに前提スキルセットが多すぎることが - Electronそのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6
- 54. - 公式以外のソースに前提スキルセットが多すぎることが - Electronそのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 CommonJS Babel
- 55. - 公式以外のソースに前提スキルセットが多すぎることが - Electronそのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 WebComponents CommonJS Babel React
- 56. - 公式以外のソースに前提スキルセットが多すぎることが - Electronそのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 Flux Redux WebComponents CommonJS Babel React
- 57. - 公式以外のソースに前提スキルセットが多すぎることが - Electronそのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 Flux Redux WebComponents CommonJS Browserify Webpack Babel bower React
- 58. - 公式以外のソースに前提スキルセットが多すぎることが - Electronそのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 Flux Redux WebComponents CommonJS Browserify Webpack Babel Grunt gulp bower React
- 59. - 公式以外のソースに前提スキルセットが多すぎることが - Electronそのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 Flux Redux WebComponents CommonJS Browserify Webpack Babel Grunt gulp bower React
- 60.
- 61.
- 62. - C# でも、C++でも、Java でもない。 JS でデスクトップアプリが作れる時代が到来 - 現在進行形で開発実績が築かれている - 触りはじめの抵抗感はすごい → 感覚が麻痺してくる✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三( ✌ ‘ω’) ✌ - JS 界隈という独特のつらさ → 強く生きて まとめ
- 63. - C# でも、C++でも、Java でもない。 JS でデスクトップアプリが作れる時代が到来 - 現在進行形で開発実績が築かれている - 触りはじめの抵抗感はすごい → 感覚が麻痺してくる✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三( ✌ ‘ω’) ✌ - JS 界隈という独特のつらさ → 強く生きて まとめ 気になったのなら
- 64.
- 65.
- 66.
- 67.
- 68.
Editor's Notes
- #4 バトルプログラマー柴田智也。 Twitter は tomoya_shibata でやってるけれどツイート廃人なのでフォローしないでください。 WEB フロント技術がメイン、仕事だと C# ちょいちょい、仕事だと Java も。
- #5 バトルプログラマー柴田智也。 Twitter は tomoya_shibata でやってるけれどツイート廃人なのでフォローしないでください。 WEB フロント技術がメイン、仕事だと C# ちょいちょい、仕事だと Java も。
- #6 バトルプログラマー柴田智也。 Twitter は tomoya_shibata でやってるけれどツイート廃人なのでフォローしないでください。 WEB フロント技術がメイン、仕事だと C# ちょいちょい、仕事だと Java も。 （次のページ）セッションもライトニングトークもしたことない、今回が初めてなんですが
- #13 いっさい話しません。めとべやだけど話しません。
- #14 ごめんなさい。刺さないでください。
- #15 今日話すのは Electron ってやつ。
- #20 （次スライド）そして一番の特徴は
- #21 （次スライド）そして一番の特徴は
- #22 （次スライド）そして一番の特徴は
- #23 内部的な話。 Chromium を載せているブラウザ、例えば Google Chrome などはこのような構成。 C++ がコントロールをになっている。
- #24 コントローラを Node.js に置き換え、レンダリングにも Node.js を配置したのが Electron。 Atom Shell というのは旧プロジェクト名。
- #37 Markdown 記法をリアルタイムプレビューできるエディタ （ブラウザで見せる）
- #44 Slack で一度問題解決したんだけど再発、現在進行形。 堪忍袋の緒が切れたのでパッケージング、アーカイブ化されてるのでごにょごにょしてソースコードを取り出してフォント指定書き換えてリパッケージしました。
- #51 同じ日に3リリースしている。全部24日前。 おまけに一番上と真ん中を比べるとメジャーバージョンが上がってる。 彼らにもなにか事情があるのだろう。
- #54 JavaScript の仕様である ECMAScript の最新バージョンの話
- #55 古い ECMAScript5 の仕様に沿ったソースに変換してくれる Babel やモジュール周りだと CommonJS なんて用語も出てくる。
- #56 既存 Electron アプリだと React が使われてたり Google の WebComponents なんて技術も
- #57 React といえば Flux の話も欠かせない、その実装をしている Redux も
- #58 ライブラリを管理するパッケージマネージャなら bower も出てきたり複数ファイルをまとめあげる Webpack や Browserify
- #59 それら作業を自動化するのに Grunt や gulp がなんて出てくると（次のページ）打ちのめされた初学者はこんな顔になります
- #60 初学者はこんな顔になります
- #63 （次ページ）Electron が気になってきましたか？ 気になったあなたは…。
- #64 （次ページ）Electron が気になってきましたか？ 気になったあなたは…。