ここは文房具（主に万年筆）に手を出しすぎて、身を持ち崩していく「にしふなばし」の、日々の記録です。Web開発の話も少々混じります。
どーも夜分遅くにすみません_(:3｣∠)_
ロゴと言っていいのかよく分かりませんが、SteamでGoat Simulatorのページを見ると多分最初に出てくる、ヤギがニヤッとしながらこっちを見ている画像がありますよね。（下図）
この画像に、いろんな文字を書き込めるジェネレーターを作ってみました。
Goat Simulator Logo Generator | http://nisihunabasi.mods.jp/goatgen/
ほんとしょーもないですが、単に語感がいいから作っただけです。ごめんなさい！(:3_ヽ)_
使い方は簡単。画像の下のボックスに文字を入れるだけです。入力できる文字は半角英数字だけで、日本語などの全角文字は使えません。今後も対応する予定はありませんのであしからず……。
画像を保存したいときは[Show Savable Image]ボタンを押すと、保存できる画像が出てくるので、右クリックして保存してください。
動作確認ブラウザはIE9~、Chromeです。他のブラウザでも使えるとは思いますが……動かなかったらごめんなさい(´；ω；｀)
ちょっと色を変えたいとか、ちょっと太字にしたいとか、その程度のことだけ実現できるwysiwygエディタがあるといいんですが、そういう低機能（？）なエディタはそうそうあるもんじゃないんですね。
でもやっと見つけました。jqueryなしで動くという触れ込みの「wysihtml5」です。
wysihtml5 – A better approach to rich text editing
デモサイトのエディタのアイコンは最低限の機能だけに抑えられています。シンプルでいいですね(´∀｀*)
早速リファレンスを見ながら導入してみました。ちなみに俺が導入したバージョンは0.3.0です。
jquery非依存だからなのかもしれませんが、導入の手順が他のエディタと比べて少々込み入ってるかも？？
Getting Started · xing/wysihtml5 Wiki · GitHub
早速テストしてみました。……が、早々におかしな箇所を発見。日本語を入力してから変換するためにスペースキーを押すと、入力した文字が消えてしまいます。
試しに「変換」キーを押したら、問題なく変換されます。スペースキーの時だけおかしくなるみたいですね。
wysihtml5のコードを見てみると、スペースキーが絡む処理が書かれているのは8536行付近にある以下の部分だけみたいです。
|
1 2 3 4 5 6 |
dom.observe(element, "keyup", function(event) { var keyCode = event.keyCode; if (keyCode === wysihtml5.SPACE_KEY || keyCode === wysihtml5.ENTER_KEY) { //that.parent.fire("newword:composer"); } }); |
一箇所だけなので、試しにこのブロックをコメントアウトしてから再度動かしてみたら、今度は問題なく変換できるようになりました。これでまた変な問題が出たら考えますが、今のところは何とか動いているのでよしとしましょう。
それではでは(´・ω・)ﾉｼ
JSをいじくってｈｇｈｇしてた時に面白いTipsを見つけたのでメモメモ。
文字列型を数値型にキャストするときはparseIntを使っていたのですが、「* 1」なんてものを使っても数値型にキャストされるみたいですね。
参考↓
JavaScript メモ / チップス parseInt() 時々落とし穴 [ ARTEMIS ]
http://www.artemis.ac/contents/javascript/jsmemo2.htm
var str = ‘0205’; //文字列型
alert(str + ‘ は ‘ + typeof str + ‘型’) ; //stringstr = str*1;
alert(str + ‘ は ‘ + typeof str + ‘型’ ) //number
※コメント部分はにしふなばし注釈
計算する時に自動的に数値型にキャストされる仕様を利用したみたいですね。2文字でキャストできるとか便利ですなっ。
でもいきなりこんなのが出てくると何してるか分からないので、ガシガシ使うのもなんだか疑問がわきますね……とか言いながらちょこちょこ使いますけど(´・ω・)
机の上にそんなメモが転がっていたので、捨てる前にメモ。
HTML5のFileAPIを通じてファイルオブジェクトを操作する際に、何処をいじったらいいのか分からなかったのでメモしたんだと思われる……。自分で書いたのに思い出せないとかどんだけ前の話なんだ；； 何処で書いたコードなのかも分からない(´；ω；｀)
$(‘#input-file’).props(‘files’)[0]
配列要素の中にFileオブジェクトが入っているみたい。ファイルが複数あるなら1,2,3……といった具合にアクセスすればよろし。
参考にしたサイトはこちら。
jQuery で HTML5 FilesAPI ファイルオブジェクトのプロパティにアクセスするには – MT Systems
リンクが紫色（訪問済リンク）だったのでおそらくそうだろう。さっきから語尾があやふやですが気にしないでください俺がポンコツなだけですm(__)m
そしてもうひとつ、File APIについての記事。参考になると思います。
JavaScriptでファイル操作！？ File APIを使いこなそう － ＠IT
それではこれにて～(´・ω・)ノ
さすがIE、色々やらかしてくれる……orz
jQuery(ver. 1.7.2)で、selectの子要素(option)を$(‘select’).empty()みたいなコードで消して、その中に違うoption要素を加える、という処理を書いたんですけれど、IE9(または8でも7でも)ではうまく動いてくれないんですね；；
正確に言うと、empty自体はうまく動いています。少なくともDOM上では消えています。しかし、見た目上はセレクトボックスに選択肢がばっちり残っている、という何ともおかしな状態になってしまっています。
仕方ないので、select要素そのものをempty（もしくはremove）して、消したものと同じ場所に新しいselect要素をappendなりしてぶち込みました。この場合はしっかりemptyの結果が反映されるんですよね。なんか無駄なことをやっているような気がしてならない……(；ω；｀)