自己紹介
ともかずさんのGEAR VRはつよい（意味深）
HTML floatについて
- floatがうまくいくときといかないときがある
- Flexboxワンちゃん(IEさえいなければ)
- HPのターゲットを設定して分析すること
- ブラウザによって使用できるCSVのバージョンがわかる
- GoogleAnalyticsでアクセス調べてIE切る話？
- まだIE8が死んでないはなし
- Can I Use http://caniuse.com/ 使うと、使いたいツールがブラウザのどのバージョンまで対応しているかを調べることができる
- 個人の勉強用ならいいけど、外に出すなら不慣れなものに挑戦するよりはFramework使った方がいいというお話
- bootstrap や bootstrap templateおすすめ
- foundation css もおすすめ
- float には clear fix を親要素につける
学生の時だけの特権
ShellScriptでスクレイピング
- tDiaryというweb日記から別のサービスに以降したい
- 通常のHTMLならpandocで変換できる
- DatabaseならMySQLなどでデータを以降すればできる。
- tDiaryとかの独自タグを自動で汎用タグに変換したい話？
- フルスクラッチから1日でCMSを作る シェルスクリプト高速開発手法入門
- これ？(Rubyのワンライナーでhtml->mdへ）
- レンダリングエンジンは↓
- ちなみにシェルスクリプトでHTMLから特定のデータをぶっこ抜いてpandocでmarkdownにするには、xmllintを使うとできたりする
sudo apt-get install libxml2-utils pandoc
xmllint --html --xpath 'XPATH' (HTMLファイル) | pandoc -f html -t markdown -
- これでHTMLから抜き出してMarkdown化できる。これは簡単にできるけど、ここから見出しに入っているタグも楽して抜きたいのよねー
基底系のnamespaceの置き場
- 言語はC#
- 先にスパゲッティつくってから、整理するのはやめたほうがいい
- どちらかというと、クラス図や、オブジェクト図を検討してから設計するとうまくいくのでは?
- テキストから書く方法にはgraphivzがある。
- JavaならJavadoがある。
- 外部にみせる、みせないも検討しておくと便利
- スパゲティ直すなら先にこういうので検討してからやらないと面倒そうだ！いや面倒だった！
React + Flux
- ReactJS(https://facebook.github.io/react/)
- Flux(https://facebook.github.io/flux/)
- Facebookが提唱しているアーキテクチャ
- https://github.com/facebook/flux
- ユーザの動作とコンポーネントの処理フローが一方通行のループを描いているため、イベント発行時の相互参照が存在しない
- JQueryだとその相互参照を全て管理する必要が有るため、ソースが数百行クラスになってくるとぶっちゃけもうメンテ無理ですやってらんないです
- そこでFluxを用いて処理フローを単純化することで書きやすいメンテしやすいコードを作成する？
- ユーザ操作からの反応を表示するときにJQueryだとちょいめんどいけどReactJSだとその辺自動でやってくれて簡単にかけますよって言うお話？
- jQueryだと依存関係が双方向になり、複雑になる、つまり管理がむずかしくなる恐れあり
- ReactJSだと依存関係が一方通行だから複雑にならないよ
- 決まった動作をされた時に、APIを叩きに行く前にViewsを変更しユーザの体感反応速度を向上する。で、APIから反応が返ってきたらそこのViewだけ更新する
- DOM……DOM……仮想DOM……
- React内で仮想DOMとして全てのオブジェクトを保有しているため、なにかイベントや更新があった時にそれらと比較して必要がある箇所だけ高速で更新表示するということが可能となるのである！(多分)
- サーバサイドとクライアントサイドで同一コードを使って管理ができる
- サーバサイドでレンダリングをしてそのままGoogleに載せたり？
暗号化しようZE！
- Let’s Encrypt
- SSL 公開鍵暗号方式のこと
- サイトの正しさを証明するために高い金が要ったり無料のサーバが要ったりといろんなめんどいハードルがあったが、普及しなかったからタダのやつ作ってやんぜ！手軽だぜ！みんな使って！ってのがLet’sEncrypt
- https://letsencrypt.org/
- https://letsencrypt.jp/
- これを含めたパッケージがいろいろ出てるので、手軽だからみんな使おうぜと
- マルチドメインが可能なので、ワイルドカードが使えない代わりに複数追加できるよ！作ったアプリ群が、アプリ毎にドメイン切って登録できるぜ
- メールサーバの証明もできるぜ
サーバレスアーキテクチャ
- サーバを触らずにシステムを作ろうぜ
- PaaSと何が違うんだい？
- Paas→Webアプリをホストするもの
- サーバレスアーキテクチャ→バックエンド、インフラ周りなイメージ
- 何に使えるんだ！
- スマホアプリのバックエンドAPI叩けたり
- IoTのバックエンド処理
- バッチ処理なんかにも使えるんだ！
- ツールは？
- 構築超簡単
- サーバ管理はAWSにおんぶにだっこでいい
- 全自動スケーリング
- でもお値段！(請求書に気をつけよう)
- 常に不特定多数相手に動作するなら請求書案件だけど、個人向けにテストコード走らせたり、定期的で少量通信で済むものとかならこれでいいんじゃないかと
LISP の紹介
- イベント駆動型プログラミング！
- LISPモンスターの実在が確認されているとかいないとか
- メインのプロセスを殺さずにポートからアクセスしてデータ書き換えてコンパイルもできるという気持ち悪いことができる
- ぶっちゃけ構文も気持ち悪い
- すごいだろ……これでif文なんだぜ……
> (if (evenp 5)
(list 1 2 "foo")
(list 3 4 "bar"))
- そのせいか人気がない ユーザが減ってきてるんだぜ
- 関数型言語のため、Web系のプログラムは非常に簡素にかけるんだぁぁああ！
- GIMP のプラグインでよく使われているんだあああ！
- GNUでコンパイルするときにMakeFileを作る場合、Guileを使用する必要があって、その仕様が鬱陶しいから(何故か)LISPで(も)解決できるんだあああ！
- 循環型リストが非常に簡単に作成可能なんだぜ
clisp
> (setf *print-circle* t)
(setf circle '#0=(1 2 3 . #0#))
#1=(1 2 3 . #1#)
scheme
> (define circle '#0=(1 2 3 . #0#))
circle
#0=(1 2 3 . #0#)
Emacs Lisp
> (setq circle '#0=(1 2 3 . #0#))
(1 2 3 1 2 . #2)
- ていうか数字のリスト内に普通に関数もぶち込めるからあとからホイホイ追加するジェネリックリストが作れるんだあああああああ！！素数配列とかフィボナッチ配列とか作るのも簡単なんだああああ！！！！