生きる   

おひさしぶりです。ごみばこです。

新年あけていました。 今年もよろしくお願いします。

 

いやー、それにしても昨年はお楽しみでしたね!

昨年をさっくりまとめようと、twilogみたものの、イベントごとが多すぎて何をピックアップしたらいいのやら…

そして、ブログに書いてないことも、twitpicに巻き込まれて死んだ写真も、なんならツイッターにも顔本にも載せていないことが、たくさんたくさんあります。

ので!今年はブログやごみばこいんをよく更新する年にしたいなーとおもいました。

 

ちょっと前に、ごみばこいんのマルチプレイまだっすかーって煽られたのでそれからですかねー。。

すこしだけできています。すこしだけ。。 トップページに新機能を付けたいって話

 

がんばります。

   イベントメモ   

ドーモ、ごみばこです。

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

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

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

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

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

Read more »

   技術的な話題   

さってー。ひさびさにアナリティクスでもみてみっかー☆

いやさすがに、弱小だけどちょいちょいアクセス来てたし0ってことは…。
つーか、5月のハッカソンやったときとかそれなりに来たはず……えー……

 

 

 

 

 

 

まてまて、アクセスログはそれなりに残ってるのでは。

.

はい(真顔)

 

11日から気づいていたけど改めて確認したってワケです。

なんでしょうね。
サーバを移動したときにミスったとか、パフォーマンスあげようぜウェイってやったときにミスったか、くらいしか思いつかないですね。

   技術的な話題   

どうも。ごみばこです。
探しものは見つけにくいものです。まだまだ探します。
夢の中へ行っている場合じゃないです。


それはそうと、トップページを少しいじろうかと、やってみます。
なんにも進んでないですがちょっと紹介。

サーバ側で計算してどうこうとかなんとかかんとか。

そのうちできます多分。

   イベントメモ   

どうも、ごみばこです。
いろいろあって更新してなかったり、いろんなダメージを追ったりしていますが
わたしはげんきです\('ω')/


というわけで久々のCTFでした。
今回はぼっちーむではなく********で参加です。

2000点で10位だそうです。
http://score.quals.seccon.jp/ranking/

おうち参加ではなくSFCまで行ってエナドリ飲みながらやってました。
複数人でわいわいやると楽しい!サイコー!

ぼっちのときと異なり、よくわからんところは任せよー、人数で押せるなーいいやーとなってしまい、あまり成果でなかったなーと思いました。ひとりのほうが、バイナリもやろうかな、とか、フォレンジックやるか、と、あれこれしようと思えるので、鍛えるならそっちのほうがいいかもしれないですねーって。

writeupはとくにないのでかかないです。
Web300は頑張った(意味深)ので、取れましたけど、周りの人をみるとスッキリ解いてるので、クソ。
http://nash.hatenablog.com/entry/2014/07/19/213114

他はさっぱりでした。
発想力が完全にどこかへ飛び立っていました。

次回もがんばりましょう。

   技術的な話題   

seccon記事以来となりますね。

トップページをスマホ対応しようしよう思ってトントンと流れていたのですが、
もくもく会に参加した際に、この前見つけた物理エンジンを使ってみようと
切り替えたらスマホ対応いけちゃった感です。

ぷあさんとぐらぷすの愉快なもくもく会
http://www.zusaar.com/event/10387003

Read more »

   技術的な話題   

わけあってリッチエディタについてちょろっと調べてみたら、なんと簡単にできるじゃないですか。
キーワードは「document.designMode = "On";」

ここで必要なもの

  • Webブラウザ
    最近のブラウザであればだいたい大丈夫です。
    スマホは未確認です。
  • JSをさっくりと読める程度の力
  • HTMLをさっくりと読める程度の力

おおまかな手順

  1. HTMLを書きます

    <html><body>
        <button onclick="editor.execCommand('undo')">元に戻す</button>
        <button onclick="editor.execCommand('bold')">太字</button>
        <button onclick="editor.execCommand('italic')">斜体</button>
        <iframe>
        <script>
            editor = document.getElementsByTagName("iframe")[0].contentDocument;
            editor.designMode = "On";
        </script>
    </body></html>
  2. Enjoy!

なるほどわからん

  • <html>
    buttonとiframeがあるだけのHTMLを用意します。
    button:ボタンを表示する
    iframe:フレームを用意して、別のページを表示する。

  • <button>
    1. <button onclick="editor.execCommand('XXXXX')">
      onclickは、クリックされた時の処理を書きます

    2. editor.execCommand
      editor変数に対して、execCommandという関数を呼びます。
      execCommandはdesignMode="On"(あとで説明)のドキュメントに対して使用できます。
      これをつかうと様々な"リッチな機能"を使えます。

  • <script>
    1. document.getElementsByTagName
      現在のドキュメント内に該当するタグを検索する。戻り値は配列

    2. document.getElementsByTagName("iframe")[0]
      iframe要素の0番目、ひとつしか無いからそれを持ってくるはず

    3. document.getElementsByTagName("iframe")[0].contentDocument
      iframe要素の0番目の中身のドキュメントを参照する
      iframe内は、別のWebページみたいな扱いなのでそういうことですね。

    4. editor変数にiframe内のドキュメントを投入しておく
      onclickイベントで簡単に書きたいのでこうします。

    5. editor.designMode = "On";
      documentオブジェクトに対して、designModeプロパティを"On"に設定することで、
      リッチなエディタができちゃいます。

限られた空間だけエディタ化したかったので、iframeを使いました。

おわりに

ボタンを増やして、
execCommandを増やして、
CSSとか書くとよいと思います。

参考

Mozilla におけるリッチテキスト編集 | MDN