LT に関する投稿を表示しています

#upcamp 2014 Tokyo に参加してましたよ

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

ドーモ、ごみばこです。

私立・プログラミングキャンプ 2014 東京大会
https://atnd.org/events/52713

こんなものに参加していました。
スタッフ側だったようです。

  が!9時集合なのに9時に起きて10時着という大失態。。
  ごめんなさいごめんなさい。。。

参加者みなさま、スタッフかたがた、お疲れ様でした!

会場提供してくださった オプティム さん。
ピザ提供してくださった ゲヒルン さん。
ありがとうございます!最高!!

 

1. やったこと

・水運びました
・ジュース類運びました
・ピザ運びました
  サイコー。

・RFC2616をちょこっと眺めました
  >> http://lab.moyo.biz/translations/rfc/rfc2616-ja.txt
  ざっくりまとめると、HTTP/1.1 の仕様書です。

・ソケットよくわからんつらいってずっと言っていました
  >> http://e-words.jp/w/E382BDE382B1E38383E38388.html
  ラップされてるのはちらほらとやる機会があったものの、
  acceptとかrecvとかそのくらいのものはなかった。

・winsockのサンプルコードを眺めました
  >> http://e-words.jp/w/Winsock.html
  WSAなんたらかんたらとか。
  ウィンドウハンドルがどうこうとか。使ってないですけど。

・OfficeTanakaのサイトをあちこち眺めていました
  >> http://officetanaka.net/excel/
  VBAにこまると大体でてくるので強い

・「さっきまで動いてたけど動かなくなった」と言っていました
  よくあるはなし。

 

2. 成果

まずはこちらをご覧ください。

 

3. 技術的なサムシング

・全体像はこんなかんじ。
  ・ひとまず自分だけ見れればいいやのレベルで
  ・ExcelVBAでHTTPサーバを建てる
  ・ワークシート名でルーティング
  ・ワークシート内のコンテンツがレスポンス
  ・(想定)DB.tableなシートを作ってデータを保持する
  ・(想定)POSTデータを読み込んでデータを保存する
  ・(想定)データを読み込んで動的に埋め込む
  ・シンプルに掲示板を作りたかった(白目)

  思いのほか、ソケット周りで詰まってしまってレスポンスを返すのがやっと。
  『さっきまで動いてたけど(変数化|リファクタ|再起動)したら動かなくなった!』

・ワークシート内のテキストを返す
  シート内を全文テキストとして取得するのどうするんだろう
  → 全セルみたら死ぬしなあ
   → いったんtsvに落としこんでから読みこめばいいんだ
    → なんかダブルクオートで囲まれたりなんかつらすぎる…
     → なんかもう、一旦正規表現でよしなに消しとこう…
    → たぶんここでキャッシュしたら早くなるんだろうなー
     → ひとまずいいや

・Declareステートメント
  >> http://msdn.microsoft.com/ja-jp/library/cc376178.aspx
  コピペしないで書いたのは多分初めて。
  必要な関数をMSDNで調べて、引数とか戻り値を合わせて。

・クラスモジュール
  >> http://www.excellenceweb.net/vba/class/what_vba_class.html
  >> http://codezine.jp/article/detail/499

  全部やるとあれな予感がしたので、一旦リクエストとレスポンスだけクラス化した。
  クラス化した直後は最高に穏やかな気分だった。

  Before:
  『あ゛あ゛あ゛あ゛あ゛変数スコープう゛う゛う゛う゛う゛』
  『いや、あの、えっと、その、つらいです、はい、まじで』

  After:
  『こころのやすらぎ』

・振り返るとそんなに書くこと無かった(重要)

 

4. これやることにした経緯

このあたりをご参照ください。

ちがう。
ぼくはcanvasとかsvgとか、オンラインで動くやつを求めていたんですよ。

ですがここで、気付いてしまったわけです。
「Excelってグラフ作れるよなあ、VBAでプログラム書けるよなあ。あっ(察し)」

 

5. 作ってみて思ったこと

もしかして『始めたいです!』な人向けとして意外に需要があるのでは?

ほら、セルのおかげでしっかり構造化できるし。

インデントもちゃんとできるし。

ハイライトも実装すればできるし。

おや?????

 
あ、この流れしってる。
言い出しっぺの法則ってやつだ。

……そういえば、プログラムエディタをExcelにしよう!って話もありましたね。
  >> http://d.hatena.ne.jp/miya2000/20111221/p0

  あ、ここにシートのテキスト化があった…

 

6. おまけ

名前を書いてあった紙があるじゃろ?

2014-08-17 23.35.50

 

これを、

 

こう、

 

ごみばこの出来上がりじゃ!w

2014-08-17 23.35.30

Mini #seccamp in Yokohama で喋ってたことへの補足とか

この記事は公開されてから1年以上経過しており、情報が古い可能性があります。

○全体的

・高橋メソッド
もどきですが。。
文字でっかく1枚に少なく、にしたらすごいサクサクつくれたので、今後も試してみたい。
高橋メソッドについて

・ネタ画像
知ってるネタはググって入れたけど、どこから探すんだろう。
Tumblerをめぐりとかで出てきそう。

・フォント
メインでつかってたフォントは「ゆたぽん(コーディング)
ゆるふわ感がありつつも、見やすさが程よくお気に入り。

一部コード関係のフォントは「Migu 1M
手元のエディタなんかは大体このフォントにしているくらいのお気に入り。


○1回目

・自己紹介
夏キャンプのときは「ごみばこの人」「ごみばこいん」とかで参加者に知られてました。
卒論の影響もあって、JSばかりですが、お仕事はサーバ側(PHP/Java)もやります(やってます)
CTFとか書いてありますが、ガチじゃないです。
ksnctf とか akictf とか Flaggers とか

この前のCSAW CTFに参加したものの、まったく旗取れず知識・技術不足、カンの弱さを実感。
SECCONは名古屋追加募集があるとかでいけるのかしら...(枠じゃなくて、僕の都合が大丈夫かーとか)

・DOM Based XSS
IPAのレポートをみるとよいかも。
IPAテクニカルウォッチ 『DOM Based XSS』に関するレポート

急増してるとあるものの、脆弱性の報告や問題視は昔からある。
jQueryマシマシや、スマホなど、jsの活躍場所や表現力、ライブラリなどががグワッと伸びた結果、
こうなってるとおもう。

HTMLエスケープを施す、が対策になるが、DOMから拾うのが安心安全。
Twitter / bulkneets: そもそも出力時に自動エスケープすべきだしその前提にたったとき ...
Twitter / ockeghem: プログラムとコードの分離という観点、およびCSPの対応という ...

じゃあどうやるの?

function escape(str){
    var e = document.createElement('div');
    e.appendChild(document.createTextNode(str));
    return e.innerHTML;  
}

つぶやくボタンを例にだしたのは、例示でよく見かけたため。
ちょっと前にも、わりと大手サイトのつぶやくエリアが無法地帯だったとの話も聞きます。

・コミットログが2つしかない件
少なくとも、自分でだいたいいいかな、まで書いたところ、コードの見やすさが最高にクソかったので、
書き直しとか設計見なおしも含めてaltJSに移行しているリポジトリです。
元のリポジトリは50くらいでした。


○2回目

にゃんぱすー( '△')/

・経緯
1日目終わった後にまっちゃさんが「見てなかったのでもう一回ね」ということで。

・ネタ
面白さ的に以前参加した残パン会でやったやつがいけるな、と。
Befunge - Wikipedia
残パン会に参加してきました。
残パン会#3にいきました
https://github.com/sters/zanpan

・Befungeについて要約
二次元的にコードを書く
プログラムカウンタ?ポインタ?が縦横に動くことができる
自己改変機能がある
Befunge-93は広さの制限がありチューリング完全ではない
Befunge-98は任意次元の拡張とかよくわからない定義がある(理解してないし資料を読んでもいない)

・デモについて
jsで書いたBefungeインタプリタ。
ブレークポイントが貼れてステップ実行できたりしてどうのこうの。
後日、丸々書き直しをしている。

チャットは残パン会でつくったもの。あの時はちゃんと動いてたはずなんだが....

サーバ側はPHP/MySQLで飛んできたデータをしまうか、Befungeで扱いやすいフォーマットで返すだけ。
認証機構なんてなんにもない。

クライアント側をフルBefungeで作ったという話。
ただし、通信周りを一から書くのは謎いので、命令を追加している。
入室、発言、取得。

・しゃべりたかったこと
いろんな時代を経て進化してきたプログラミング言語もいいですが、esolangという世界もあります。
いろいろ楽しい、面白いので覗いてみましょう

はろーわーるどかいたよー^^って言って縦横に記号並んでたら面白いでしょ?

複雑なesolangだとそもそも実装が少なかったりするので、そういったことにチャレンジするのも、ね。


というあたりで。