Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Electron を知る

3,113 views

Published on

2015.12.19 めとべや東京 #10 LT 資料

Published in: Technology
  • Be the first to comment

Electron を知る

  1. 1. Electron を知る 2015.12.20 めとべや東京 #10 @tomoya_shibata
  2. 2. おまえはだれだ
  3. 3. I’m - バトルプログラマー柴田智也 @tomoya_shibata - 今すぐ don’t follow me - 求職中 Like - html, AltCSS, JS, C#, Java… - フロント寄り、Java は仕事専門 Dislike おまえはだれだ
  4. 4. I’m - バトルプログラマー柴田智也 @tomoya_shibata - 今すぐ don’t follow me - 求職中 Like - html, AltCSS, JS, C#, Java… - フロント寄り、Java は仕事専門 Dislike - JS, JS それと JS とかいう言語 おまえはだれだ
  5. 5. I’m - バトルプログラマー柴田智也 @tomoya_shibata - 今すぐ don’t follow me - 求職中 Like - html, AltCSS, JS, C#, Java… - フロント寄り、Java は仕事専門 Dislike - JS, JS それと JS おまえはだれだ 普段の様子
  6. 6. おしながき
  7. 7. ・話すこと、話さないこと ・Electron ってなーんだ ・どこで使われてるの ・Electron へライブ移植 ・知見と注意 おしながき
  8. 8. ・話すこと、話さないこと ・Electron ってなーんだ ・どこで使われてるの ・Electron へライブ移植 ・知見と注意 おしながき
  9. 9. 話すこと、話さないこと 1
  10. 10. MS の素晴らしい C# MS の素晴らしい .NET MS の素晴らしい WPF や UWP MS の素晴らしい Windows Forms 話すこと、話さないこと
  11. 11. MS の素晴らしい C# MS の素晴らしい .NET MS の素晴らしい WPF や UWP MS の素晴らしい Windows Forms 話すこと、話さないお子と を一切話しません
  12. 12. MS の素晴らしい C# MS の素晴らしい .NET MS の素晴らしい WPF や UWP MS の素晴らしい Windows Forms 話すこと、話さないお子と を一切話しません
  13. 13. 話すこと、話さないこと
  14. 14. ・話すこと、話さないこと ・Electron ってなーんだ ・どこで使われてるの ・Electron へライブ移植 ・知見や注意 おしながき
  15. 15. Electron ってなーんだ 2
  16. 16. - デスクトップアプリケーションプラットフォーム - html, CSS, JS という基本 WEB スキルで開発 - GitHub 開発 - node.js + Chromium ランタイム → 雑に言うと GoogleChrome だけに提供する感覚で開発できる → node.js の恩恵も受けられる Electron ってなーんだ 昔は Atom Shell って名前だったよ
  17. 17. ~今まで~ 「Windows でデスクトップアプリなら WPF/UWP」 Electron ってなーんだ
  18. 18. ~今まで~ 「Windows でデスクトップアプリなら WPF/UWP」 ~最近~ 「Windows でデスクトップアプリなら WPF/UWP あと、Electron」 Electron ってなーんだ
  19. 19. ~今まで~ 「Windows でデスクトップアプリなら WPF/UWP」 ~最近~ 「Windows でデスクトップアプリなら WPF/UWP あと、Electron」 Electron ってなーんだ 選択肢の変化
  20. 20. ~今まで~ 「Windows でデスクトップアプリなら WPF/UWP」 ~最近~ 「Windows でデスクトップアプリなら WPF/UWP あと、Electron」 Electron ってなーんだ 選択肢の変化 1 Source for All OS
  21. 21. Electron ってなーんだ 出典:https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
  22. 22. Electron ってなーんだ 出典:https://speakerdeck.com/zcbenz/practice-on-embedding-node-dot-js-into-atom-editor
  23. 23. Q. 似ているので NW.js(旧 node-webkit) ってのがあるよ? A. ごめんなさい! よく知りません! - 観測している限り勢いがあるのは Electron - ウェッブ業界の流行(要出典)はアテにならんので眉唾 - エントリポイントが html なのが NW.js - エントリポイントが JS なのが Electron - 利用者が多い → 情報も多い(日本語も) Electron ってなーんだ
  24. 24. ・話すこと、話さないこと ・Electron ってなーんだ ・どこで使われてるの ・Electron へライブ移植 ・知見と注意 おしながき
  25. 25. どこで使われてるの 3
  26. 26. Atom - GitHub 開発 テキストエディタ どこで使われてるの
  27. 27. Slack for Windows - ChatWorks と並んで人気のチャットツール どこで使われてるの
  28. 28. Kobito for Windows - Increments 開発 - Markdown エディタ - Qiita 連携 どこで使われてるの
  29. 29. Visual Studio Code - 説明不要 - ググラビリティの低さで有名 どこで使われてるの
  30. 30. ほか一覧 - Nuclide (Facebook 開発 IDE) - N1 (Nylas 開発 メールクライアント) - GitKraken (axosoft 開発 Git クライアント) - 名称自粛 (個人開発 艦これ専用ブラウザ) → すごく既視感のある UI なんだけど…。 どこで使われてるの
  31. 31. どこで使われてるの https://github.com/sindresorhus/awesome-electron
  32. 32. どこで使われてるの 番外 https://github.com/sindresorhus/awesome-electron - Electron 採用 アプリ - Electron 用ツール - ドキュメント - コミュニティ などを紹介している
  33. 33. ・話すこと、話さないこと ・Electron ってなーんだ ・どこで使われてるの ・Electron へライブ移植 ・知見と注意 おしながき
  34. 34. Electron へライブ移植 4
  35. 35. 題材は MarkdownPreview ってツール React とモッダーン JS(ES6) を学ぶために作ってます Electron へライブ移植 https://github.com/tomoyashibata/MarkdownPreview ES6 ×
  36. 36. MarkdownPreview の構造、超シンプル、超ベーシック Electron へライブ移植
  37. 37. 移植するぞい ₍₍ (ง ˙ω˙)ว ⁾⁾
  38. 38. - 自動更新 - ダイアログ - 描画プロセスとメインプロセスの通信 - メニュー - トレイ(通知領域のアレ) - クリップボード - ファイルをドラッグアンドドロップできる(独自タグ) - Windows 8 からのトースト通知 ほかにもいろいろあるぞい 補足:API たち
  39. 39. ・話すこと、話さないこと ・Electron ってなーんだ ・どこで使われてるの ・Electron へライブ移植 ・知見と注意 おしながき
  40. 40. 知見と注意 5
  41. 41. おいでませ中華フォント
  42. 42. 大好き中華フォントが来日。 - CSS とかで font-family 指定してないとこうなる 知見と注意
  43. 43. DirectWrite の有効、無効設定
  44. 44. DirectWrite の有効、無効設定 - 文字を綺麗にレンダリングするためのもの…のはず - 日本語だと目も当てられない状態になることが - GoogleChrome で無効化している人も 知見と注意 web-preferences.direct-write に真偽値を渡してオンオフ
  45. 45. 知見と注意
  46. 46. 知見と注意
  47. 47. Electron リリースペース
  48. 48. 知見と注意
  49. 49. 更新しすぎ 知見と注意 ` 同じ日に3リリース
  50. 50. 公式以外の情報
  51. 51. - 公式以外のソースに前提スキルセットが多すぎることが - Electron そのものではなく、JS 界隈の問題 知見と注意
  52. 52. - 公式以外のソースに前提スキルセットが多すぎることが - Electron そのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6
  53. 53. - 公式以外のソースに前提スキルセットが多すぎることが - Electron そのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 CommonJS Babel
  54. 54. - 公式以外のソースに前提スキルセットが多すぎることが - Electron そのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 WebComponents CommonJS Babel React
  55. 55. - 公式以外のソースに前提スキルセットが多すぎることが - Electron そのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 Flux Redux WebComponents CommonJS Babel React
  56. 56. - 公式以外のソースに前提スキルセットが多すぎることが - Electron そのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 Flux Redux WebComponents CommonJS Browserify Webpack Babel bower React
  57. 57. - 公式以外のソースに前提スキルセットが多すぎることが - Electron そのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 Flux Redux WebComponents CommonJS Browserify Webpack Babel Grunt gulp bower React
  58. 58. - 公式以外のソースに前提スキルセットが多すぎることが - Electron そのものではなく、JS 界隈の問題 知見と注意 ECMAScript 6 Flux Redux WebComponents CommonJS Browserify Webpack Babel Grunt gulp bower React
  59. 59. すべてを1日で学ぼうとしない気持ち大事 知見と注意
  60. 60. まとめ
  61. 61. - C# でも、C++ でも、Java でもない。 JS でデスクトップアプリが作れる時代が到来 - 現在進行形で開発実績が築かれている - 触りはじめの抵抗感はすごい → 感覚が麻痺してくる✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三( ✌ ‘ω’) ✌ - JS 界隈という独特のつらさ → 強く生きて まとめ
  62. 62. - C# でも、C++ でも、Java でもない。 JS でデスクトップアプリが作れる時代が到来 - 現在進行形で開発実績が築かれている - 触りはじめの抵抗感はすごい → 感覚が麻痺してくる✌ (‘ω’ ✌ )三 ✌ (‘ω’) ✌ 三( ✌ ‘ω’) ✌ - JS 界隈という独特のつらさ → 強く生きて まとめ 気になったのなら
  63. 63. あなたと!
  64. 64. Electron!
  65. 65. 今すぐ!
  66. 66. https://github.com/atom/electron !!!環境構築!!!
  67. 67. ご静聴ありがとうございました

×