Upgrade to Pro — share decks privately, control downloads, hide ads and more …

frontend-nanimo-wakaranai-20191224

threecourse
December 24, 2019
650

 frontend-nanimo-wakaranai-20191224

threecourse

December 24, 2019
Tweet

Transcript

  1. 選択肢 • Pythonのインタラクティブな描画フレームワークを使う Bokeh, Plotlyなど • JavaScriptを使う • PyQtやwxPythonといったGUIフレームワークを使う •

    他の言語を使う 学習コストはあるものの、JavaScriptがスタンダードな解っぽい すべてPythonで書けると楽なので、Plotlyなどに注目する価値はある かも。その場合も裏側はJavaScriptなので、学んでおく意味はある。
  2. 何を作るか • PythonのWebフレームワークでサーバを立てる • ブラウザで表示する • GUIの機能や描画はJavaScript • ロジックはPython 1.

    ブラウザに表示されたボタンを押す 2. Pythonで問題を生成し、対応する解を出力する 3. JavaScriptでブラウザに表示する
  3. HTML/CSS • 基本的な概念の理解 HTMLのタグ、属性(特にid, class) CSSのセレクタ(タイプ、クラス、ID) padding/border/margin • 慣れないと、そもそも意図したとおりのレイアウトどおりに部 品を配置するのが難しい。中央寄せや段組みだけでも大変

    段組みはフレキシブルボックスレイアウト (とグリッドレイアウト)が基本らしい • 配置は一旦ヘッダ、UI、表示部分などの枠を作り、その枠にさ らに押し込んでいくのが分かりやすそう
  4. CSSフレームワーク • 素の部品だと、見た目が味気なさすぎる • CSSフレームワークを使うと簡単に良い見た目になる • 今回は元ネタに従ってSemantic UIを使用 • 他にもいろいろある。BULMAなどは良いかもしれない

    CSSフレームワークのススメ - BULMAの導入と覚え書き https://qiita.com/belq/items/10ec41f656e47ee2b540 • なぜそのように動くのか理解するには、フレームワークのソー スを見なくてはいけないことも • フレームワークで対応できない部分は適宜CSSを差し込んでい くしかなさそう
  5. JavaScript • PythonやC++/Java/C#などとは感覚が違う言語 • 非同期処理が多く、コールバックを使う書き方が必要になる • ライブラリの読み込みは以下のように参照すれば簡単に使用で きる <script src="http://d3js.org/d3.v3.min.js"

    charset="utf-8"></script> • しかし、複数ファイルのjsファイルの管理などを考えると、 node.jsをインストールしてnpmでパッケージ管理、 webpackでビルド、といった枠組みにした方が良い
  6. ブラウザへの描画 ブラウザに描画するには、以下の方法がある (PythonとJavaScriptではじめるデータビジュアライゼーション 90Pより) • 特殊なHTML タグを使ったSVG • 2D canvas

    コンテキストへの描画 • 3D canvas WebGL コンテキストへの描画。OpenGL コマンドの一部 を使う。 • 最新のCSS を使ってアニメーションやグラフィックスプリミティブな どを作成する。 今回は2D canvas コンテキストへの描画を使用
  7. 参考文献 • longcontest visualizer framework https://github.com/kmyk/longcontest-visualizer-framework 今回の元ネタ。TypeScriptでファイルを読み込んで描画する • よくわかるHTML5+CSS3の教科書【第3版】 https://www.amazon.co.jp/dp/B07KQPY7PL

    • 改訂新版JavaScript本格入門 https://www.amazon.co.jp/dp/B01LYO6C1N • PythonとJavaScriptではじめるデータビジュアライゼーション https://www.amazon.co.jp/dp/4873118085 • 機械学習スタートアップシリーズ Pythonで学ぶ強化学習 https://www.amazon.co.jp/dp/4065142989 tornado + Vue.jsでGUIを作っている