チーズケーキ技術 17.12

(1)

1 Node.js

で

1 から作る生放送サーバ

9

第1章はじめに 10 1.1 前提環境 _{. . . .} ₁₀ Node.jsのインストール _{. . . .} ₁₀ FFMPEGのインストール_{. . . .} ₁₀ 1.2 ソースコードについて _{. . . .} ₁₁ JavaScriptについて _{. . . .} ₁₁ 第₂章 _{HTTP Live Streaming}の概要 ₁₂ 2.1 HLSの再生環境 _{. . . .} ₁₂ 2.2 HLSが使われているサービス _{. . . .} ₁₃ MPEG-DASH . . . 13 2.3 HLSの仕様_{. . . .} ₁₄ tsファイル _{. . . .} ₁₄ m3u8ファイル _{. . . .} ₁₄ 再生クライアントの挙動 _{. . . .} ₁₅ m3u8タグの解説_{. . . .} ₁₆ 第₃章配信サーバの実装 ₁₉ 3.1 ニコニコ動画から動画ファイルを取得する _{. . . .} ₁₉ ニコニコ動画のサーバ _{. . . .} ₂₁ 3.2 取得した動画を_HLSで再生する_{. . . .} ₂₂ 3.3 動画を_TSに分割する _{. . . .} ₂₃ 3.4 複数の動画を連続再生する_{. . . .} ₂₃ 3.5 ブラウザからリクエストを受ける _{. . . .} ₂₅ 3.6 WebUIの改良 _{. . . .} ₂₇ 3.7 多くのブラウザで再生できるようにする_{. . . .} ₃₃

(2)

目次第₄章まとめ ₃₄

2 Pwnable

超入門

35

第₁章環境 ₃₆ 1.1 練習問題の起動方法 _{. . . .} ₃₆ 1.2 コンテナ間の通信 _{. . . .} ₃₇ ctf-lab-2017-handsonの起動 _{. . . .} ₃₇ 第₂章システムコールとシェルコード ₃₈ 2.1 システムコール_{. . . .} ₃₈ 2.2 シェルコード _{. . . .} ₃₉ シェルコードの実行方法 _{. . . .} ₄₀ シェルコードの制約 _{. . . .} ₄₀ 第₃章バッファオーバーフロー ₄₁ 3.1 バッファとは _{. . . .} ₄₁ 3.2 バッファオーバーフローさせてみる _{. . . .} ₄₂ 3.3 変数を書き換えてみる _{. . . .} ₄₂ 3.4 まとめ _{. . . .} ₄₃ 第₄章解析の初歩 ₄₄ 4.1 解析方法 _{. . . .} ₄₄ ltrace . . . 44 strace . . . 45 radare2 . . . 46 第₅章シェルを起動する ₄₇ 5.1 脆弱性の悪用 _{. . . .} ₄₈ 5.2 リターンアドレスの改ざん_{. . . .} ₄₉ スタックについて _{. . . .} ₄₉ 5.3 exploitの書き方 _{. . . .} ₅₁ プログラム _{. . . .} ₅₁ 第₆章 _FSB ₅₃ 6.1 FSBとは _{. . . .} ₅₃ 6.2 書式文字列 _{. . . .} ₅₃ 6.3 例 _{. . . .} ₅₄ 第₇章 _{GOT Overwrite} ₅₅ 7.1 関数のアドレス解決 _{. . . .} ₅₅

(3)

7.2 FSBと_{GOT Overwrite . . . .} ₅₇ 7.3 exploitを書く _{. . . .} ₅₇ 第₈章セキュリティ機構 ₅₉ 8.1 NXbit . . . 59 8.2 ASLR, PIE . . . 59 8.3 RELRO . . . 59 8.4 Canary . . . 60 回避方法 _{. . . .} ₆₀ 第9章 Information leak 61 9.1 FSBの利用_{. . . .} ₆₁ 第₁₀章 _ROP ₆₂ 10.1 例 _{. . . .} ₆₂ 10.2 pwntools . . . 63 第₁₁章練習問題 ₆₄ 第₁₂章練習問題解答 ₆₆

3 言われてみれば当たり前なタッチ入力の話

77

第₁章タッチ入力とボタン入力の違い ₇₈ 1.1 ボタン入力 _{. . . .} ₇₈ 1.2 タッチ入力 _{. . . .} ₇₈ 第₂章タッチ入力の分類 ₇₉ 第3章タッチ入力の区別 80 第4章タッチ入力を扱うためのクラス設計 82 第₅章 _Inputの実装 ₈₃ 第₆章 _UIManagerの実装 ₈₅ 第₇章 _UIの実装 ₈₆ 第₈章上記の設計の実用例 ₈₇ 第₉章より高度な_UIへ ₈₈ 9.1 UIをスタックで管理_{. . . .} ₈₈

(4)

目次 9.2 UIパーツの作成 _{. . . .} ₈₈ 第₁₀章まとめ ₈₉

4 そばやのワク☆ワク流体シミュレーション

MPS

編

90

第1章流体シミュレーションって？ 91 第2章流体シミュレーションの種類 93 第₃章事前準備 ₉₅ 第₄章 _MPS法のタイムステップ ₉₇

5 まだ間に合う！

Vue.js

101

第1章 Vue.jsとは？ 102 エディタについて _{. . . 105} 第₂章サポートライブラリ ₁₀₆ 2.1 Vue Router . . . 106 2.2 Vuex . . . 106 2.3 axios . . . 106

2.4 Vue Server Renderer . . . 107

2.5 Nuxt.js . . . 107 第3章開発向けライブラリ 108 3.1 vue-loader . . . 108 3.2 eslint-vue-plugin . . . 108 3.3 vue-test-utils . . . 108 第₄章必要なもの ₁₀₉ 第₅章 _vue-cliでプロジェクトを作成し_devサーバーを起動する ₁₁₀ 第₆章実際に作ってみよう ₁₁₁ 第₇章起動してみよう ₁₁₃ 第8章 .vueファイルについて 114 8.1 template . . . 115 8.2 script . . . 115

(5)

8.3 style . . . 115 第₉章 _Twitterの準備をする ₁₁₆ 第₁₀章雛形を作る ₁₁₇ 10.1 LandingPage.vue . . . 117 10.2 Tweet.vueの追加 _{. . . 118} 第₁₁章 _TLの表示 ₁₁₉ 11.1 LandingPage.vue . . . 119 11.2 Tweet.vue . . . 120 第12章 Tweetできるようにしてみる 121 第₁₃章終わりに ₁₂₂ 著者紹介 ₁₂₃

(6)

1 Node.js

で

1

から作る

生放送サーバ

NaruseJun

著

Node.jsを使って生放送サーバを書いていきます。コアとなる技術は HTTP Live Streaming(HLS)と呼ばれる_HTTPベースのストリーミングプロトコルで、特殊なストリーミングサーバを必要としないのが特徴です。今回は、_HLSを使ってニコニコ動画の_Nsen*1_{の再現に挑戦してみます。} *1ユーザ参加型ラジオ風生放送サービス。ユーザが再生したい動画をリクエストすると、その動画が生放送される。

(7)

Node.jsで₁から作る生放送サーバ

第

1 章

はじめに

1.1 前提環境

今回紹介するコードは、以下の環境で動かしています。簡単に構築方法も示しますので、適宜用意してください。

• Windows 10 (version 1709 build 16299.125) – Microsoft Edge 41.16299.15.0 • Node.js 9.3.0 – npm 5.5.1 • FFMPEG 3.4.1

Node.js

のインストール

Windows/macOS/Linux向けのバイナリが _{https://nodejs.org/}から入手できます。バイナリをインストールした場合は、パスを通すようにしてください。

macOSでは、_Homebrewが利用可能であれば_{brew install node} を実行しても入手可能

です。 Linuxでは、パッケージマネージャ経由でも入手可能ですが、ディストリビューションによっては古いバージョンがインストールされる場合があります。古い_Node.jsでは動作しないコードを多数含みますので、必ず最新版を利用してください。*1

FFMPEG

のインストール

Windows/macOS/Linux向けのバイナリが _{https://www.ffmpeg.org/} から入手できます。バイナリをインストールした場合は、パスを通すようにしてください。

macOSでは、_Homebrewが利用可能であれば_{brew install ffmpeg}を実行しても入手可能

です。

Linuxでは、パッケージマネージャ経由でも入手可能です。

(8)

Node.jsで₁から作る生放送サーバ

第

2 章

HTTP Live Streaming

の概要

HTTP Live Streaming(HLS)と呼ばれる_HTTPベースのストリーミングプロトコルで、特殊なストリーミングサーバを必要としないのが特徴です。いわゆる生放送のようなイベントストリームの配信はもちろん、過去の生放送の録画*1_等のVOD(Video on Demand)_{配信も可能です。} ユーザの回線速度に応じて品質の異なる動画を配信するアダプティブストリーミングにも対応し ています。 Appleによって開発され、₂₀₁₇年₁₀月に_RFC8216として仕様が公開されました。本章では、_HLSの概要を紹介していきますが、以下の資料も併せて参照することをおすすめします。 • HTTPライブストリーミングの概要_{(Apple -}日本語₎ – https://developer.apple.com/jp/documentation/StreamingMediaGuide.pdf

• RFC 8216 - HTTP Live Streaming (IETF -英語₎

– https://tools.ietf.org/pdf/rfc8216.pdf

2.1 HLS

の再生環境

HLSは_HTTPベースということもあってブラウザとの親和性が高く、一部のブラウザではデフォルトで_HLSの再生に対応しています。

(9)

2 Pwnable

超入門

kriw

著

Pwnableとは_{CTF(Capture The Flag)}という情報セキュリティに関する

競技の分野の一つです。_{Binary Exploit}とか呼ばれていることもあります。わかりやすくいうとハッキングですね。（違法行為はダメ）一般的な Pwnableの問題では小さなバイナリファイルが渡されその脆弱性をついてプログラムの制御を奪うことを目的としておりコンピューターに関する深い知識が要求されるためCTFの中でも特に敷居の高い分野ではないかと思います。今回はそんなPwnableの初歩を紹介したいと思います。

(10)

Pwnable超入門

第

1 章

環境

途中、_Pythonのスクリプトが登場しますがすべて_Python2.7で動かした結果です。また、今回

の説明の実行環境は_ubuntu16.04の_{docker images}上で行っていて、練習問題も同じ_ubuntu16.04 で動作しています。以下のコマンドで今回説明するコマンドやプログラムのソースコードが入った環境が手に入ります。 docker run ※※※※※※※※※※※※※※※

1.1 練習問題の起動方法

練習問題は_docker上で動かすのでまず_dockerをインストールしておいて下さい。インストールしたら以下のコマンドで問題のコンテナをダウンロード_&実行できます。 docker run ※※※※※※※※※※※※※

dockerの_ipアドレスを調べます。まず、_{docker ps}で起動中の_dockerのコンテナ_IDを探しま

す。このコンテナしか動いていない場合は以下のコマンドでコンテナ_IDだけ取り出せます。 $ d o c k e r ps | t a i l -n1 | cut -d’ ’ -f1 3 5 7 9c a b 0 5 f 3 e docker inspectコンテナ_IDを実行して_ipアドレスを探します。 $ d o c k e r i n s p e c t 3 5 7 9c a b 0 5 f 3 e | g r e p \"I P A d d r e s s "I P A d d r e s s": " 1 7 2 . 1 7 . 0 . 2 " , "I P A d d r e s s": " 1 7 2 . 1 7 . 0 . 2 " , 試しに_ncコマンド等を使って問題に接続してみます。 $ nc 1 7 2 . 1 7 . 0 . 2 1 0 0 0 Do you w a n t to l o g i n? yes

You are not a d m i n.

(11)

Pwnable超入門

第

2 章

システムコールとシェルコード

CTFでも良くつかうシステムコール、シェルコードについて紹介します。

2.1 システムコール

システムコールは入出力の_{read, write}や_{execve, fork}といったカーネルに対して発行する命令です。シェルを取るためには例えば_{execve("/bin/sh")}を実行する必要があります。 x86では_{int 0x80}命令によってシステムコールが発行されレジスタ役割 eax システムコール番号 ebx 第一引数 ecx 第二引数 edx 第三引数 esi 第四引数 edi 第五引数 x86_64ではレジスタ役割 rax システムコール番号 rdi 第一引数 rsi 第二引数 rdx 第三引数 r10 第四引数 r8 第五引数 r9 第六引数となっています。とりあえず_CTFでは以下のシステムコールを使うことが多いので覚えておくと良いです。

(12)

3

言われてみれば当たり前な

タッチ入力の話

Namazu

著

こんにちは、_Namazuです。皆さんスマホゲームは作っていますか？ Unityなどを使えばほとんど作れるようになりましたよね。今回は、そこで扱われるタッチ入力やそれを扱う_UIについて詳しく考えていきたいと思います。尚、ここで紹介するフレームワークのテンプレートは_GitHubにて公開しています。 • GitHub : https://※※※※※※※※※※※※ • README : https://※※※※※※※※※※※※※※※※※※※ C#、_MonoGameを用いた開発をしておりますが、今回は設計の話が主ですので環境が異なるという方も参考にしていただけるかと考えております。

(13)

言われてみれば当たり前なタッチ入力の話

第

1 章

タッチ入力とボタン入力の違い

Android端末や_iPhone、_{Windows Phone}などはタッチで入力をします。一方、多くのゲーム

ハード（_PS、_Wii、_Switch等）や_PCではボタン（キーボード）で*1_{入力をしますね。} タッチ入力とボタン入力では入力の処理の仕方が異なります。

1.1 ボタン入力

ボタン入力では、「どのボタンが押されたか」によって入力を判別します。押されたボタン毎に 処理を書くだけで充分ですね。ただ、ボタン入力の種類にはただの押下だけでなくボタンを押し 続ける、複数のボタンの同時入力などがあります。これらについても処理を分ける必要がある場 合があります。

1.2 タッチ入力

タッチ入力では、「どこが押されたか」によって入力を判別します。同じタップでもタッチされ た位置によって処理が全く異なります。さらに、こちらの入力はタップ以外にもロングタップ、ス ワイプ、フリック、ピンチイン_/アウトなど種類が多岐に渡るためボタン入力よりも複雑だという ことができるでしょう。 *1便宜的にマウス入力はタッチ入力の一部だと考えます

(14)

言われてみれば当たり前なタッチ入力の話

第

3 章

タッチ入力の区別

突然ですが、問題です。ある距離の近い二点_A,Bがあるとして、以下の方法で二点に交互に入力が来た場合それらを区別できるでしょうか？ _{case1 : AB}間を擦るようにスワイプした_{case2 :} 点_Aと点_B を日本の指で交互にタッチしたただし、入力はあるフレームでは点_A、次のフレームでは点_B、その次のフレームでは点_A…のように無駄な入力はなく且つ途切れることなく行われたとするフレーム数タッチされている点 1 A 2 B 3 A 4 B 5 A これは、一度に入力されるタッチ数が高々一つであるマウス入力では考える必要がなかったものです。ゲームを作ったことのある方なら分かると思いますが、入力を連続的に取ることは出来ません。（だからこそこの問題が成立します）ですから、一見これらを区別することは不可能なように思えます。

(15)

4

そばやのワク☆ワク

流体シミュレーション

MPS

編

そばや著

以前から興味のあった流体をちょいと本読んでやってみました。できあがったものはこちら _{https://※※※※※※※※※※※} ソースはこちら _{https://※※※※※※※※※※※}

(16)

第

1 章

流体シミュレーションって？

流体シミュレーションとは、難しい方程式を解かないとわからないような流体の動きをプログラムで近似するものです。剛体シミュレーションで運動方程式 F = ma を用いるところを、流体シミュレーションではナビエ・ストークス方程式₍以下_NS方程式₎というものを使います。その昔、ナビエさんとストークスさんが発明したらしいです。_{wikipedia(https:} //ja.wikipedia.org/wiki/ナビエ‒ストークス方程式 ₎曰く、その全貌は以下のようになっています。 Dv Dt =− 1 ρgrad(p) + µ ρ∆v + λ + µ ρ grad(Θ) + Θ ρgrad(λ + µ) +1 ρgrad(v· grad(µ)) + 1 ρrot(v× grad(µ)) − 1 ρv∆µ + g わわわからぁぁぁぁぁん_!!!! 何言ってんだこいつは！ラグランジュ微分ってなんだ！ふざけるな！！ということで限定条件下で式を簡略化します。今回使う条件は「粘性率が一定の非圧縮性流れ」です。粘性率とは、まぁ粘り気です。非圧縮性とは、どんなに力を加えても流体の体積が一定に保たれるというものです。₍現実にはありえません₎すると使う式は Dv Dt =− 1 ρgrad(p) + ν∆v + g となります。これならなんとか食らいつけそうです。₁項ずつ見ていきましょう。 Dv Dt Dv Dt はラグランジュ微分なのですが、まぁとりあえず普通に時間微分だと思って良いでしょう。vは速度なので、左辺はいわゆる加速度です。 −1 ρgrad(p)右辺第一項は圧力勾配項と呼ばれ、圧力の大きいところから小さいところにむけて加速度を作り出す作用のある項です。ρは密度ですが、実質質量ですね。力を質量で割って加速度を得るようなかんじです。

(17)

第₂章流体シミュレーションの種類

第

2 章

流体シミュレーションの種類

流体シミュレーションの手法は大きく分けて₂種類。 1つは格子法です。格子法とは、計算する空間を適当な数の格子で分割し、その小領域それぞれに対し速度などのパラメータをあてていきます。つまり、「₁つの格子が流体の₁単位です！」という主張なわけですね。実際、_NS方程式は速度場に対する加速度などを考えるものなので、これは結構自然な発想だと思います。もう₁つは粒子法です。今回テーマにしたいのはこちらですね。粒子法は、流体を粒子の集合 として表現する方法です。粒子₁つ₁つに速度などが存在します。これもなんとなく納得できそうなかんじです。

どっちがいいの？

2種類あると比較したくなるのが人情ってもんです。まず格子法ですが、こちらは数学的な「場」の概念に則った自然なモデルです。ですから、₍こういうとおかしいかもしれませんが₎物理法則が通用します。計算もとても安定しています。欠点としては • 完全に流体の存在する領域を決定しないと使えない • まともな見た目のものを作ると、計算負荷が高い • 水面を作りづらいなどが考えられます。一方粒子法です。粒子法について詳細の説明はこれからとなりますが、私の感想としては「粒子法は格子法に比べて、だいぶ無理がある」といったかんじです。若干こじつけじみたところがあり、そのせいで数値的安定性を欠く傾向があります。もちろんそのぶん得られるメリットもあります。メリットとしては • 存在する場所を予め決めておかなくても良い • 計算負荷の調整がある程度容易 • 水面や飛沫が表現できる

(18)

5

まだ間に合う！

_Vue.js

とーふとふ著

初めまして、とーふとふといいます。今回は最近_Webフレームワークとしてかなりの勢いを持っている_Vue.jsについての記事を書きたいと思います。この記事は今年の₁₁月に私の所属サークルである東京工業大学デジタル創作同好会traPの活動の一つチズケもくもく会(チズケに集まってあるテーマに沿ったことを黙々と作業する会)で行ったVue.js入門の資料に加筆・修正を加えたものです。

(19)

まだ間に合う！ _Vue.js

第

1 章

Vue.js

とは？

図_{1.1: Vue.js}のロゴ Vue (発音は_{/ v j u} ː _/、_viewと同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板₍モノリシック_{: monolithic)}なフレームワークとは異なり、_Vueは初めから少しづつ適用していけるように設計されています。中核となるライブラリは_view 層だけに焦点を当てているため、_Vue.jsを使い始めたり、他のライブラリや既存のプロジェクトに統合したりすることはとても簡単です。一方、モダンなツールやサポートライブラリと併せて利用することで、洗練されたシングルページアプリケーションを開発することも可能です。

(20)

第₁章_Vue.jsとは？つまり、導入は楽チンで取り入れやすく、その気になれば他のライブラリと連携させてイケイケなアプリを作れるすげーやつということです。よく言われる利点としては • 導入が楽である • 学習コストが低い • 公式ドキュメントが豊富 • 日本語情報が多い • 勢いがある₍利用者の数も開発も₎ などです。特に₂₀₁₇年は_Webフレームワークの中では_Vue.jsの年と言っても過言ではないくらいで、

Googleの検索トレンドでは_React.jsを抜いたり、_GitHubのスター数でも来年には抜かすのでは

ないかというほどになっています。