tag:blogger.com,1999:blog-81578381603918330432024-03-05T18:55:04.936+09:00pd @ bloggerJavascript 関係の何かしらを書いています。<br>
node.js / Titanium Mobile / Three.js 等など。<br>
仕事探してます。のんびり屋さんです。<br>
Twitter @psychedesire です。<br>Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.comBlogger99125tag:blogger.com,1999:blog-8157838160391833043.post-51464572364256305722015-11-06T03:45:00.000+09:002015-11-06T03:48:35.462+09:00Swift2 + APNsPHP でRemote Notification する時のメモ (バッジを増やしたりする)なんか、あんまり日本語の解説が少ないのでメモ。<br />
てか、手元にMacがないので記憶から書く羽目になりますが。<br />
<br />
<b>下準備 ( 認証キーだのなんだのの事 )</b><br />
<br />
→ENTRUST からダウンロードしてくるやつだとなんかうまく動かなかったので、<br />
自分で .p12 作ってから .pem 作らなきゃだめです。<br />
キーチェーンアクセス?で右クリックから .p12 が作れなくて .pem が直接作れちゃう時は、<br />
左下の「自分の証明書」だかを選んで、その中で右クリックすると .p12 作れます。<br />
兎に角、ターミナルで openssl して、<br />
cert と key が合っててapple のpush のサーバに接続できるか、<br />
ちゃんと確認しましょうね。<br />
あと、ProvisioningFile?をちゃんと設定して書きだしても、<br />
なんか勝手に設定が変わっていることがあるので、<br />
build 時にエラーになる場合は、developer center で確認しましょう。<br />
<br />
<b>アプリの設定をする</b><br />
<br />
→Capabilitiesを開いて、プッシュを有効に、<br />
バックグラウンドを有効にして、<br />
バックグラウンドと通知をオンにしましょう。<br />
<br />
<br />
<b>アプリ側のコードを書くとき</b><br />
<br />
→プッシュ関連はAppDelegateに書いていきます。<br />
Viewの方に書くことはない気がする。<br />
全体的な流れは、<br />
application(...didFinishLaunchingWithOptions...)で、<br />
アプリの初期化時にプッシュのアクションのidentifyとか、<br />
<b>カテゴリのidentify</b>とか<br />
バッジ・音・バイブの設定とかを設定させて、<br />
application(...didRegisterForRemoteNotificationsWithDeviceToken...)に、<br />
トークンを貰った時の処理を書きます(大概の人はサーバに送ると思う)。<br />
<br />
application(...didReceiveRemoteNotification...) で<br />
通知自体が端末に届いた瞬間の処理を切り分けさせます。<br />
通知が届いたときに、アプリがForegroundにあるかInactiveか、<br />
はたまたBackgroundにあるかが大事なのですが、<br />
バッジの値を増やす時は、<br />
UIApplicationState.Background で、バッジの値を増やす処理をさせます。<br />
Swift1.x では UIApplicationStateBackground だったみたいですが、<br />
Swift2 で UIApplicationState.Background に書き方が変わったみたいです。<br />
<br />
バッジを消す時は、applicationWillEnterForeground() か<br />
applicationDidBecomeActive()のどっちかでやりました。<br />
どっちでやったか忘れた。お前の記憶ガバガバじゃねぇかよ。<br />
<br /> で、通知をタップした時の処理を<br />
application(handleActionWithIdentifier...forRemoteNotification...completionHandler)で、<br />
設定したアクションごとに処理させます。<br />
<b><br />サーバ側のコードを書くとき(APNsPHPの場合)</b><br />
<br />
→基本的にはみんなが知ってるサンプルのコードを書けばよいと思いますが、<br />
重要なのは、<br />
$mes->setCategory("HOGEHUGA")<br />
で、<b>カテゴリのidentify</b>と同じ値を設定してやることと、<br />
$mes->setContentAvailable(true)<br />
で、バックグラウンド時の受け取り(Silent Push? Silent Notification?)も<br />
有効にしてあげることです。<br />
<br />
大体ハマりどころ(ハマりどころさん?!マズいですよ…)はこんな感じすかね。<br />
言語、仕様。(Azにゃん)の変更がガバガバだからね。しょうがないね。<br />
赤い文字との戦いだってそれ一番言われてるから。<br />
<br />
<b>以下参考サイト</b><br />
<br />
下準備 (公開鍵の作成とか)<br />
<a href="http://d.hatena.ne.jp/samril/20130902/1378198909">http://d.hatena.ne.jp/samril/20130902/1378198909</a><br />
<br />
アプリの設定 (Capablities)<br />
<a href="http://dev.classmethod.jp/references/ios-background-fetch/">http://dev.classmethod.jp/references/ios-background-fetch/</a><br />
<br />
単純にプッシュ通知だけやる場合(gistにコードもあって…いいケツしてますねぇ…(ONDISK))<br />
<a href="http://qiita.com/sawapi/items/feba100851de47fbe412">http://qiita.com/sawapi/items/feba100851de47fbe412</a><br />
<br />
複数アクションのプッシュ通知(Objective-CとSwift1どっちも書いてて、涙が、で、出ますよ…)<br />
<a href="http://qiita.com/Night___/items/7ff61699c443f2d9a117">http://qiita.com/Night___/items/7ff61699c443f2d9a117</a><br />
<br />Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-32368690580249476882015-11-01T01:51:00.002+09:002015-11-01T01:51:53.034+09:00.xps -> Blender -> .pmxメモ <br />
<br />
.xps -> Blender<br />
<a href="http://johnzero7.deviantart.com/journal/Blender-2-7-XPS-Tools-475948475">http://johnzero7.deviantart.com/journal/Blender-2-7-XPS-Tools-475948475</a><br />
<br />
Blender -> .pmx<br />
<a href="http://www.nicovideo.jp/watch/sm26394132">http://www.nicovideo.jp/watch/sm26394132</a><br />
<br />
昔はBlenderから .pmx にする為には、<br />
一旦 .x 形式にしなきゃだめだったんだけど、<br />
一発で .pmx に出来るようになった?みたい。<br />
動画を見たけど相当凄いことになってる。<br />
<br />
ちょっと色々やってみるかなぁ?どうしようかなぁ。<br />
時間がないから無理だな、うん。覚書。メモ。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-84258597408207728092015-09-26T12:27:00.000+09:002015-09-26T15:06:22.812+09:00[javascript][gyrosensor] html5 でジャイロセンサーをいじくる。休みの朝の小一時間のプログラミング。<br />
javascript で、ジャイロセンサー(傾きセンサー) も触れるみたいすね。<br />
<br />
<a href="http://ics-web.jp/lab/archives/4095" target="_blank">http://ics-web.jp/lab/archives/4095</a><br />
<br />
html5 の navigator.geolocation の heading が端末によって?取れねーと思ってて、<br />
どうやって解決しましょということで、触ってみました。<br />
<br />
<a href="http://www.psychedesire.org/sample/test_gyro.html">http://www.psychedesire.org/sample/test_gyro.html</a><br />
<br />
スマホのブラウザ(Android Chrome or Android Firefox)で開いてみてください。<br />
で、押してみるってボタンを押すと、<br />
なんか、テキストボックスが傾きによって動くと思います。<br />
<br />
で、ほげもん豪にこれを組み込みました。<br />
<br />
<strike><a href="http://www.psychedesire.org/sample/test_hoge_a3.html">http://www.psychedesire.org/sample/test_hoge_a3.html</a></strike><br />
<br />
<br />
<a href="http://www.psychedesire.org/sample/test_hoge_a4.html">http://www.psychedesire.org/sample/test_hoge_a4.html</a><br />
<br />
例によってAndroid の Firefox のみで動作確認。 <br />
右上の緑ニコチャンを押して緑の四角を表示させると、<br />
緑の四角が傾きによって動くと思います。<br />
これ、結構THREE.js の視野角と、<br />
実際のスマホのジャイロセンサーの傾き角度の感覚を、<br />
人間の体感感覚に合わせる調整が必要ですね。<br />
一応、既に調整はしてあります。<br />
<br />
<a href="http://www.psychedesire.org/sample/script/GPS.js">http://www.psychedesire.org/sample/script/GPS.js</a><br />
<br />
<strike>の28行目と29行目の0.1とかかけてあるところですね。</strike><br />
<strike>あと、回転角の符号反転をしないと、</strike><br />
<strike>自分のスマホの傾きと、</strike><br />
<strike>画面上のオブジェクトの見え方が一致しなくなります。</strike><br />
<br />
地球が丸いという事実に合わせて、<br />
色々と修正しまくっているので、 <br />
その都度 GPS.js を観察してくださいw<br />
この辺にやり方書いてあった。<br />
<br />
<a href="http://stackoverflow.com/questions/28365948/javascript-latitude-longitude-to-xyz-on-sphere-three-js">http://stackoverflow.com/questions/28365948/javascript-latitude-longitude-to-xyz-on-sphere-three-js</a><br />
<br />
Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-43599652744094841932015-09-21T02:14:00.000+09:002015-09-21T02:14:12.399+09:00ポケモンGO 的なもの?を WEBブラウザだけで作ってみてるんだけどもはい。進捗報告です。まだまだできてません。<br />
が、まぁまぁ形は見えてきてるんですけども。<br />
こちらから試せます。<br />
<br />
<a href="http://www.psychedesire.org/sample/test_hoge_a2.html">http://www.psychedesire.org/sample/test_hoge_a2.html</a><br />
<br />
<a href="https://play.google.com/store/apps/details?id=org.mozilla.firefox&hl=ja" target="_blank">Android 版の Firefox</a> でしかまだ動いてません。多分。<br />Android 版の Chrome はダメっぽいのは直してません。<br />
直るのかもわからん。調べてない。後回し。<br />
カメラ許可とGPS許可が必要です。<br />
<br />
なんか次へ次へすると、カメラの画面が起動すると思うんですけど、<br />
その画面に行ったら、右上のニコちゃんマークを押してください。<br />
そしたら、アラートが出て、緑色の四角が出てくると思うんですけども、<br />
それがモンスターの代わりです。<br />
<br />
その状態でうろうろすると、多分、緑の四角が画面から消えます。<br />
今んとこはそこまで。<br />
右下のセンサーが赤くなったり、攻撃出来たり、<br />
ちゃんとしたモンスターが表示されたりってのは、まだまだって感じ。 <br />
<br />
で、まぁ、問題は、スマホの向きですね。方角です。<br />
これ、navigator.geolocation で取れたり取れなかったりします。<br />
端末の問題なのかなんなのかはわかりません。<br />
<br />
Ingress でも、自分は北を向いてるのに、<br />
緑の三角(自分)はわけわかんない方角向いてるって経験、<br />
ないでしょうかね?私はしょっちゅうです。<br />
Ingress では<b>『位置』</b>が大事で、<br />
<b>『どの方角を向いているか』</b>はゲームの本質に関わるようなもんじゃないので、<br />
なんか方角が違う気持ち悪さはあっても、そこまで気になりませんでしたけど、<br />
<br />
ポケモンGOが、こういう、<br />
<b>実際のカメラ画面上にモンスターが表示されるゲームだ、</b><br />
<b>と<span style="color: red;">仮定した場合</span>は、やばいっすね。</b><br />
<br />
ポケモンのいる方を向いているはずなのに、ポケモンが画面に表示されなくなります。<br />
<br />
まぁ、どんなゲームなのか、わかりませんけどね。<br />
上記仮定にあるようなゲームであった場合、<br />
ポケモンGOPLUS?が、<br />
その辺のGPS位置情報(主に方角)補正機能も兼ねるのかも知れませんし。<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-44773128226214002352015-09-16T03:33:00.000+09:002015-09-16T03:33:32.976+09:00[virtualbox][genymotion]起動させる動いたわ。<br />
てか、自分のパソコンぶっ壊れて、<br />
おふくろのパソコン曲がり中なんだけど、<br />
VirtualBox入れたらネット繋がらなくなって焦った。<br />
まぁ、ルータのISP接続し直したら直ったんだけども。<br />
<br />
で、まぁ、Virtualbox入れる所は、どうでもいいと。<br />
で、genymotion をインストールするのもどうでもいいと。<br />
<br />
ただ、genymotion で適当な Android 端末を作って起動させようとしたら、<br />
<pre class="file">VT-x is not available.</pre>
だかのなんちゃら言うエラーが出る。<br />
調べてみると、アクセラレーションの設定を、<br />
ホストのPC(おふくろのパソコン)のBIOSをいじるか、<br />
VirutualBox のアクセラレーションの設定をいじるか、<br />
みたいな感じみたいなんだけど、<br />
おふくろのパソコンのBIOS見ても、そんな項目がない。<br />
VirtualBox 上のマシン(Android 端末)の設定→システム→アクセラレーションのタブが、<br />
選択不可になっていて変更できない。<br />
<br />
VirtualBox 上のマシンを右クリック→エクスプローラを表示で出てくるフォルダの中の、<br />
[Android端末名].vbox や[Android端末名].vbox-pref の中を、<br />
<a href="http://tm.root-n.com/application:genymotion:install_and_up" target="_blank">この記事みたいに書き換えてもダメ。</a><br />
<br />
で、どうしたもんかわからないから、<br />
『アクセラレーションが有効ならなんでもいいんだろ!』<br />
ってことで、<br />
VirtualBox 上のマシンの設定→ディスプレイ→3Dアクセラレーションを有効化に<br />
チェックを入れたら、起動した。<br />
その下の 2Dビデオアクセラレーションを有効化 もチェックしたら、<br />
俺の環境(てか、おふくろのパソコン)だと無効な設定ですって怒られて、<br />
勝手にチェック外されました。<br />
<br />
爆速!という触れ込みに違わず、速い。これは凄い。<br />
<br />Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-88549570162738685002015-09-15T23:39:00.000+09:002015-09-15T23:41:22.983+09:00ポケモンGO的なやつ<a href="http://live.nicovideo.jp/watch/lv233732173" target="_blank">今日の叡王戦の鈴木大介先生</a>はシュークリーム一杯食べてたと思う。(81並感<br />
<br />
ポケモンGO的なやつは全然進んでおりません。<br />
寝る時間は惜しむタイプです。<br />
変な時間に目覚めたら書きますよー書く書く。<br />
<br />
<a href="http://www.psychedesire.org/sample/test_gps2.html">http://www.psychedesire.org/sample/test_gps2.html</a><br />
<br />
スマホはFirefoxでしかチェックしてません。 <br />
PCだと画面サイズがフルのとこにカメラが表示されるから<br />
ウィンドウサイズでかいと大変なことになると思います。<br />
<br />
1・なんでスマホのChromeだと動かないのか調べる<br />
(URL 作るとこか createObject() が独特なんじゃないか説。調べる。)<br />
2・<a href="http://phpspot.org/blog/archives/2015/09/windowjqueryres.html" target="_blank">ウィンドウサイズを変えたらリサイズするようにする。</a>Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-45176273165771490982015-09-15T23:06:00.003+09:002015-09-15T23:06:36.873+09:00[Appcelerator Studio] sh.exe titanium command not found の時の対処。ほい。なんかこれTitaniumStudioの時もやらなかったか?<br />
まぁいいか。<br />
まぁ、<a href="http://developer.appcelerator.com/question/176446/ti-setup---how-do-you-run-this#comment-216107" target="_blank">ここに書いてあるけど</a>、英語が嫌な人向け。 <br />
<br />
<br />
まずは、Appcelerator Studio コマンドプロンプトを開く。<br />
まぁ、ツールバーみたいなとこにある如何にもコンソールが開きそうな黒いアイコンを押す。<br />
<br />
npm 使うので、前提として node.js がインストールされてるか確認のコマンド<br />
<br />
$ node -v<br />
<br />
する。バージョンが表示されたらOK。<br />
<br />
で、<br />
<br />
$ npm install -g titanium<br />
<br />
する。ごばーと出てくる。<br />
で、なんかコンソールの表示が変になるかも知れないけど完成。多分。<br />
<br />
テストで、<br />
<br />
$ti config<br />
<br />
もしくは<br />
<br />
$titanium config<br />
<br />
ってやって、<br />
設定がどばーと表示されたら大丈夫。<br />
<br />
<code class="plain plain">$ ti config android.emulatorStartTimeout 600000</code><br />
<br />
<code class="plain plain">とかやったらいいと<a href="http://syaka-syaka.blogspot.jp/2014/07/titanium-studioandroid.html" target="_blank">こちらに書いてありました。</a></code><br />
<code class="plain plain">それでもエミュレータ起動しないんで <a href="http://www.genymotion.com/" target="_blank">Genymotion</a> インスコ中。</code><br />
<code class="plain plain"><a href="http://dev.classmethod.jp/smartphone/android/genymotion-install/" target="_blank">ここら辺が詳しいっぽい</a>。</code>Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-59737315978933969722015-09-13T12:46:00.002+09:002015-09-13T12:46:50.585+09:00ポケモンGO的なものを作るということについて、ちょっとくらい、まともに考えてみなくもない。まぁ、折角<a href="http://psychedesire.blogspot.jp/2015/09/javascriptgeolocation.html" target="_blank"><span style="font-size: large;"><b>GPS</b></span></a>と<a href="http://psychedesire.blogspot.jp/2015/09/javascriptgetusermedia-web.html" target="_blank"><span style="font-size: large;"><b>カメラ</b></span></a>をjavascriptであれこれできるんだから、<br />
ちょっとくらい、考えてみる。<br />
<br />
<b>視野角</b>は、真正面を見たとき、<br />
ばっちり認識できるのが左右に35度ずつとかそんくらい、<br />
まぁまぁ見えてるのが左右に60度くらい。<br />
無意識でも認識できてるのが左右に100度くらい。<br />
<br />
<b>奥行</b>は、まぁ、1kmまでは見えないよね。<br />
なんせ視力次第ではある。<br />
<a href="http://www.js.yamanashi.ac.jp/~skita/kei6.htm" target="_blank">なんかすっごい視界のこと書いてあるとこ見つけたけど、難し過ぎてわからん。 </a><br />
めんどくさいから、Ingress持って柳町公園行った方が早いな。<br />
ポータルキーで距離分かるから。<br />
<br />
あとは、<b>方向</b>。これは、navigator.geolocation で heading が取れるから、<br />
端末がまともなら、なんとかなる。<br />
<br />
自分を中心として、<br />
向いている方角から真正面の奥行までを半径とした円を描き、<br />
左右に60度ずつを取り出す、か、最初から円弧を描くか、みたいな感じ。<br />
そのピザのひとかけみたいな範囲内にある、<br />
疑似的に位置情報を与えられた3Dオブジェクトは見えると。<br />
<br />
昔、セカイカメラってのがあったんだけど(<a href="http://jp.techcrunch.com/2013/12/17/the_end_of_sekai/" target="_blank">2014年にサービス終了したらしい</a>)、<br />
そんな感じすかね?まぁ、使ったことないんだけど。<br />
<br />
てか、まぁ、一番の問題は、多分、<br />
GPS起動しながらスマホ充電しながら歩いてると、<br />
カメラが本体の熱で起動しない点だと思う。<br />
Ingressでポータル申請しようとして、<br />
本体の熱の所為でカメラ起動しないとかよくあったからなぁ。<br />
アプリ自体が処理が多かったりするとっていうのもあるんだろうけど。<br />
<br />
やっぱめんどくせー。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-3859216340866477722015-09-13T04:04:00.001+09:002015-09-13T04:16:46.139+09:00[javascript][getUserMedia] スマホのカメラをWebカメラに出来るんだねー。WebRTCってのがあって、<br />
まぁ、リアルタイムであれこれできるっつーやつなんだけども、<br />
ほんで、まぁ、なんだろ、html5 で Webカメラを使えるっていうのは、<br />
前にJSARToolkit 使ってみようと思った時に知ったんだけど、<br />
スマホのカメラも使えるっつーのは知ってたような、<br />
忘れたような。忘れただけかも。<br />
<br />
というわけで、まぁ、画面サイズのフレキシブルなのには対応してないけど、<br />
作った。スマホでも動く。<br />
<br />
スマホだと、Chromeだと動かない。Operaも知らん。<br />
Firefoxのスマホ版だと、とりあえず動いた。<br />
パソコンだと、ChromeとFirefoxで動いた。Webカメラつないでなきゃだめだけどね。<br />
<br />
<a href="http://www.psychedesire.org/sample/test_webcam.html">http://www.psychedesire.org/sample/test_webcam.html</a><br />
<br />
あ、あと、前回のGPSのやつも<br />
<br />
<a href="http://www.psychedesire.org/sample/test_gps.html">http://www.psychedesire.org/sample/test_gps.html</a><br />
<br />
で見れますよ。<br />
<br />
てか、今回のWebカメラのやつもむりくりオブジェクト指向ぽくしようとして、<br />
見事に破綻しているどころか、<br />
なんかもう、酷過ぎて酷過ぎて。<br />
あれだよね。callback関数のやつとか、ダメだよねあれ。<br />
this を引き継げないでしょ。<br />
引き継げる書き方すると、functionネスト深くなるから、<br />
なんか、ジレンマみたいになるね。<br />
なんかうまいやり方あったような気もするけど、忘れた。<br />
結局、CAM.prototype にcallback関数を外に放り出した奴からアクセスする感じになって、<br />
今度は this.からアクセスできなくなったりするでしょ。<br />
もうわけわかめだよ。<br />
まぁ、ソースコードみて笑ってやってください。<br />
<br />
あ、あと、Webカメラの画面の下に、<br />
同じ(スマホでは全然違う感じになってると思うけど)画面が表示されて、<br />
右下に数字がすごい勢いで表示されてると思うけども、<br />
あれは、Webカメラの画面をcanvas で再描画して、<br />
再描画したcanvas 上に現在時刻秒を表示してるんです。<br />
<a href="http://www.html5rocks.com/ja/tutorials/webgl/jsartoolkit_webrtc/" target="_blank">JSARToolkit のやつでやり方を知った感じ?</a><br />
つまり、何ができるかっていうと、<br />
ポケモンGOの発売より先にポケモンGO的な何かが作れるってことだよね。<br />
前にWebカメラの画面にMMDの初音ミク表示しようとしたりしたんだけど、<br />
そういうノリですね。<br />
Three.js でモンスターの3Dオブジェクト表示すればいいっていうね。<br />
で、そのオブジェクトに疑似GPSの位置を与えて、<br />
実際にその位置との距離で3Dオブジェクトの表示倍率変えれば、<br />
近づけば大きく見えて、離れれば小さく見えて、みたいなね。<br />
<br />
<span style="font-size: x-large;"><b>まぁ、めんどくさいからやらないけどね。</b></span><br />
<br />
ていうか、前にGoogleStreetView上に勝手にモンスター表示させて<br />
GoogleStreetViewをダンジョンみたいにするゲーム作ろうとして、<br />
途中までやりかけてやめたんだけど、あれどこいったんだろ?<br />
ふくろう?owl?みたいなレンタルサーバに上げたんだけどなぁ。<br />
<br />
<span style="font-size: x-large;"><b><a href="http://psychedesire.blogspot.jp/2012/02/google-street-view-threejs-3d.html" target="_blank">このブログに書いてあるじゃねーかwwww</a></b></span><br />
<br />
クソワロタwwwwwwwwwww<br />
<br />
<span style="font-size: x-large;"><b>まぁ、動かなかったけどね!</b></span><br />
<br />
なんだろ?CDNのリンク切れかなぁ?別にいいや。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-78043458864917273282015-09-12T17:55:00.001+09:002015-09-12T17:55:44.102+09:00[javascript][geolocation] ややハマりマジコスメあ、プログラマっぽい職種に就職しました。<br />
ありがとうございます。<br />
<br />
で、ブラウザで、javascirpt でも位置情報取得できるじゃないですか。<br />
navigator.geolocation.getCurrentPoition(succ,err,opt);<br />
みたいなやつ、<br />
<br />
あれ、結果返ってくるまでに時間かかりますので、気をつけて下さい。<br />
調子こいてオブジェクト化して楽して使いまわせるようにしようとか思って、<br />
<br />
<br />
<ol>
<li><span style="background-color: #b6d7a8;">var GPS = function(){</span></li>
<li><span style="background-color: #b6d7a8;"> this.curr(); </span></li>
<li><span style="background-color: #b6d7a8;">}</span></li>
<li><span style="background-color: #b6d7a8;">_GPS = GPS.prototype;</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.geo = navigator.geolocation;</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.lat = 0; // latitude</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.lng =0; // longitude</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.time = 0 // time</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.e = false // error -> true;</span> </li>
<li><span style="background-color: #b6d7a8;">_GPS.opt = {<br /> enableHighAccuracy : true,<br /> timeout : 5000,<br /> maximumAge : 0</span></li>
<li><span style="background-color: #b6d7a8;">};</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.getTime = function(){</span></li>
<li><span style="background-color: #b6d7a8;"> this.time= (new Date()).getTime();</span></li>
<li><span style="background-color: #b6d7a8;">} </span></li>
<li><span style="background-color: #b6d7a8;">_GPS.succ = function(pos){<br /> var co = pos.coords; </span></li>
<li><span style="background-color: #b6d7a8;"> _GPS.lat = co.latitude;</span></li>
<li><span style="background-color: #b6d7a8;"> _GPS.lng = co.longitude;<br /> _GPS.getTime();<br />}</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.err = function(e){<br /> _GPS.e = true;<br /> _GPS.lat = -1;<br /> _GPS.lng = -1;<br /> _GPS.getTime();</span></li>
<li><span style="background-color: #b6d7a8;">}</span></li>
<li><span style="background-color: #b6d7a8;"><br /></span></li>
<li><span style="background-color: #b6d7a8;">_GPS.curr = function(){</span></li>
<li><span style="background-color: #b6d7a8;"> var _t = this;<br /> _t.geo.getCurrentPosition(_t.succ,_t.err,_t.opt);</span></li>
<li><span style="background-color: #b6d7a8;">}</span></li>
</ol>
<span style="background-color: #b6d7a8;"><br /></span>
とかだと、<br />
<br />
var gps = new GPS();<br />
alert(gps.lat); => 0<br />
<br />
で、はぁ?ってなります。<br />
<br />
なので、<br />
<br />
<ol>
<li><span style="background-color: #b6d7a8;">var GPS = function(){</span></li>
<li><span style="background-color: #b6d7a8;"> this.curr(); </span></li>
<li><span style="background-color: #b6d7a8;">}</span></li>
<li><span style="background-color: #b6d7a8;">_GPS = GPS.prototype;</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.geo = navigator.geolocation;</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.lat = 0; // latitude</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.lng =0; // longitude</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.time = 0 // time</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.e = false // error -> true; </span></li>
<li><b><span style="background-color: #ea9999;">_GPS.get = false // got location -> true</span></b></li>
<li><span style="background-color: #b6d7a8;">_GPS.opt = {<br /> enableHighAccuracy : true,<br /> timeout : 5000,<br /> maximumAge : 0</span></li>
<li><span style="background-color: #b6d7a8;">};</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.getTime = function(){</span></li>
<li><span style="background-color: #b6d7a8;"> this.time= (new Date()).getTime();</span></li>
<li><span style="background-color: #b6d7a8;">} </span></li>
<li><span style="background-color: #b6d7a8;">_GPS.succ = function(pos){<br /> var co = pos.coords; </span></li>
<li><span style="background-color: #b6d7a8;"> _GPS.lat = co.latitude;</span></li>
<li><span style="background-color: #b6d7a8;"> _GPS.lng = co.longitude;<br /> _GPS.getTime();</span></li>
<li><b><span style="background-color: #ea9999;"> _GPS.get = true;</span></b><br /><span style="background-color: #b6d7a8;">}</span></li>
<li><span style="background-color: #b6d7a8;">_GPS.err = function(e){<br /> _GPS.e = true;<br /> _GPS.lat = -1;<br /> _GPS.lng = -1;<br /> _GPS.getTime();</span></li>
<li><b><span style="background-color: #ea9999;"> _GPS.get = true;</span></b> </li>
<li><span style="background-color: #b6d7a8;">}</span></li>
<li><span style="background-color: #b6d7a8;"><br /></span></li>
<li><span style="background-color: #b6d7a8;">_GPS.curr = function(){</span></li>
<li><span style="background-color: #b6d7a8;"> var _t = this;<br /> _t.geo.getCurrentPosition(_t.succ,_t.err,_t.opt);</span></li>
<li><span style="background-color: #b6d7a8;">}</span></li>
</ol>
<br />
で、<br />
var gps = new GPS();<br />
<br />
var loop = setInterval(function(){<br />
if(gps.get){<br />
alert(gps.lat + " - " + gps.lng);<br />
clearInterval(loop); <br />
} <br />
},500);<br />
<br />
とかみたいにしなきゃダメっすね。<br />
まぁ、結論としては、普通に書いた方がいいって感じ。<br />
どうしてもグローバルにいろいろ書きたくないんじゃーって人は、<br />
こんな感じになるんでしょうかね。<br />
あと、success の function の中が深くなるのが嫌な人とかかな?<br />
<br />
まぁ、そんな感じで。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-25916419050175535172012-08-20T04:50:00.000+09:002012-08-20T04:50:08.403+09:00Javascript の オブジェクトの操作。なんか別な事しようと思ってハマッたっつか、面白いから調べてみたよ。<br />
<br />
<blockquote class="tr_bq">
var obj = {foo:"moge"};<br />
var dat = obj;<br />
obj.foo = "bar";<br />
<br />
obj = "";<br />
<b>alert(dat.foo); // <- undefined とかを期待したのに、bar って出る。</b><br />
<b>alert(obj.foo); // <- こっちはundefined と出る。おいおい。</b></blockquote>
<br />
<br />
というわけで、こうしなきゃだめ。<br />
<br />
<blockquote class="tr_bq">
var obj = {foo:"moge"};<br />
var dat = obj;<br />
obj.foo = "bar";<br />
<br />
<b>obj.foo = undefined;</b><br />
alert(dat.foo); // <- undefined<br />
alert(obj.foo); // <- undefined</blockquote>
<br />
なんか、当たり前のコードになった。<br />
なんか、これ、腑に落ちないよねー。 <br />
それが出来るんなら、なんで最初のは undefined にならねーんだっつー話ですよ。<br />
まぁいいか。つか、おかげでなんか今まで書いたコードでメモリ食う理由がわかった気もする。<br />
<br />
あと、調べてわかったことは、 var obj ってしたら、 delete(obj) って出来ないということ。<br />
グローバル変数じゃないと、delete 演算子は仕事をしないっつーことのようです。 <br />
基本らしいのだけど、基本を知りません。ワタクシ。Oh! No.<br />
<a href="http://nanto.asablo.jp/blog/2008/01/09/2552470#jsdel-target">http://nanto.asablo.jp/blog/2008/01/09/2552470#jsdel-target</a><br />
<br />
ここを読むと良くわかりました。<br />
<br />
<blockquote class="tr_bq">
【削除されない見本】<br />
<b> var obj = {foo:"moge"};</b><br />
var dat = obj;<br />
obj.foo = "bar";<br />
<br />
<b> delete(obj); // <- 削除されない</b><br />
alert(dat.foo); // <- bar<br />
alert(obj.foo); // <- bar</blockquote>
<br />
かーらーの、<br />
<br />
<blockquote class="tr_bq">
【削除される見本】<br />
<b> obj = {foo:"moge"};</b><br />
var dat = obj;<br />
obj.foo = "bar";<br />
<br />
<b> delete(obj); // <- 削除される </b><br />
alert(dat.foo); // <- こっちは bar が出る。<br />
alert(obj.foo); // <-エラーになって alert が出ない。</blockquote>
<br />
Javascript の オブジェクトとかは参照渡し!とはいえ、<br />
参照元のオブジェクト自体を削除しても、参照先のプロパティも削除されるわけではなく、<br />
どっちかというと、ギリギリ前に参照していた内容がコピーされる、ということかなぁ?<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-5140023872540934532012-08-15T09:51:00.002+09:002012-08-15T09:51:26.393+09:00BPMSync.js にレベルコントローラもつけましたの件。これもつけないと不便だよなーと思ったので、<br />
最小値、最高値、小節と音符範囲、コールバック関数を指定して、<br />
レベルが変化していくような機能をBPMSync,jsにつけました。<br />
なんか、メンバ変数があとで使いたくなるようなものにしてしまったので、<br />
さらに機能を追加した時に困りそうでたまらないですねー。センスないわ。<br />
<br />
<script type="text/javascript" src="http://jsdo.it/blogparts/8U9j/js?width=465&height=496&view=play"></script><br />
<br />
デモではさっきのかえるの歌の文字をデカくしていってますが、<br />
このレベルコントローラ単独でも使えますよ。<br />
<br />
var hoge = BPMSync(150,16,[]);<br />
hoge.levelControl(0,127,[0,8],[1,15],function(val){/*do something*/});<br />
<br />
みたいにすれば動くはずー。<br />
<br />
最初は jQuery の animate と連動したら楽かなーとか、<br />
animate をいじくりまわせばいいかなーとか思ったけど、<br />
めんどくせーから書きました。<br />
30分くらい?のお気楽コーディング。<br />
でも、今回は怠けて、変な文字とか投げられたときの処理してなかったり、<br />
数が減っていくような動きを要求された時にちゃんと動くか確かめなかったり、<br />
まぁ、手抜きですけど、いいんですよ。そんなものは。<br />
加算しか出来ないんだったら、コールバック関数の中でうまいことしてくださいよですよ。ええ。<br />
<br />
あとなんかもう一個くらいないとこれ使い物にならねーなっつー機能があったので、<br />
思い出したら追加します。<br />
ここまで出掛かっているのに思い出せない感じ。<br />
<br />
思いつきは、ちゃんとメモを取りましょう!Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-15827103497493079242012-08-14T22:13:00.000+09:002012-08-14T22:13:00.163+09:00BPMと音符単位で同期させてなんかさせたい時にいい感じの BPMSync.js 作った。というわけで、さっきの Movietime.js よりかは、<br />
こっちのほうが使い道ありそうな感じがします。<br />
似たようなのを前にどっかで見たんだけど、<br />
失念してしまったので、さっきの勢いでバリバリと書いてみた。<br />
<br />
<script type="text/javascript" src="http://jsdo.it/blogparts/pWxm/js?width=465&height=496&view=play"></script><br />
<br />
なかなか表現が難しい?のだけど、<br />
1フレームを8分音符と同じにするとか、16分音符と同じにするとかできると、<br />
結構楽チンにかっこいいPV的なものが出来ますよ。 <br />
<br />
てか、書いたのは良いんだけど、<br />
なんかこれ、 new BPMSync() で最後に渡す配列がイマイチだよね。<br />
まぁ、これ、自分で改造してもらって、配列の中に Object 入れて、 <br />
そのオブジェクトによって内部的にさらに何かしらのメソッドゥーとか動かしていけば、<br />
うまい事いくんじゃないかしら?<br />
<br />
小節と音符を管理する都合上、配列で表現するとなると、二次元配列ぽくなるのは仕方ないかなぁ。<br />
他になんかうまい方法ねーべかな。<br />
<br />
これ、for文とかでぶん回したくなるんだけど、<br />
なんかうまく動かない気がするので、for文じゃなくした。<br />
なんか、this.measure とかせんでも、引数使いまわしてもよかったんだけど、<br />
まぁ、そこら辺は、趣味?管理のしやすさ?クラスなのにメソッドに引数とか入れないのがベターなのかなー?とか、<br />
なんか世間体とかいろいろ考えた結果こうしましたけど、<br />
もっと綺麗にエレガントに素晴らしく出来る人は、Forkしてゴリゴリ修正してください。<br />
むしろ全部作り直してくれてもOKです。<br />
<br />
オホホホホ。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-29490377063980742632012-08-14T18:57:00.001+09:002012-08-14T19:01:01.502+09:00FPSとフレームを指定して、なんか動かす Movietime.js を作りました。Timeline.js って名前にしようとしたら、同じような内容で、同じようなのがあったので笑った。<br />
<br />
<a href="http://kjirou.net/main/public/js/lib/timeline/test/index.html">http://kjirou.net/main/public/js/lib/timeline/test/index.html</a><br />
<br />
で、上記と何が違うかというと、<br />
FPS(Frame Par Seconds) を指定して、<br />
Flashみたいに、特定のフレームになったらなんかを表示するような事ができます。<br />
ちなみに、ちゃんとFPSとか計ってないから、ずれたりしたらごめんね。<br />
<br />
jsdoit にコードをアップしました。<br />
なんか、前に作ったアカウントがどのOpenIDプロバイダで登録したかわからなくなったので、<br />
仕方がないからpsychedesire1というアカウントを作ってやりました。<br />
<br />
デモでは、指定したフレームが経過したら、<br />
文字が太くなります。<br />
<br />
<script type="text/javascript" src="http://jsdo.it/blogparts/yJcG/js?width=465&height=496&view=play"></script><br />
<br />
test2 が二番目に来てるけど、500フレーム経過したら動いてねって指示をしているので、<br />
一番最後に動きます。<br />
そこら辺は、機能として、前回の経過フレームに加算する方法で動かすか、<br />
それともそのままの経過フレームで動かすかを選べるようにしたほうが良いかなー。<br />
<br />
そのままの経過フレームで動かすほうがよいメリットは、<br />
コードを書き換えなくても、メソッドチェーンのケツにくっつければよいという点。<br />
<br />
<b> hoge.next(0,func1).next(150,func2).next(200,func3);</b><br />
<b> 0フレーム目→150フレーム目→200フレーム目</b><br />
<br />
となんか作ってて、100フレーム目にもアクション追加したいよ!<br />
ってなった時に、普通にメソッドチェーンのケツに新しいアクションを追加すればよいだけ。<br />
<br />
<b> hoge.next(0,func1).next(150,func2).next(200,func3).next(100,func4); </b><br />
<b> 0フレーム目→150フレーム目→200フレーム目→100フレーム目</b><br />
<br />
<br />
<br />
<br />
前回の経過フレームに加算する方法だと、<br />
<br />
<b> hoge.next(0,func1).next(150,func2).next(50,func3);</b>
<br />
<b> 0フレーム目→150フレーム目(150を指定)→200フレーム目(50を指定 200-150 = 50だから)</b><br />
<br />
と作ってて、100フレーム目にもアクションを追加したいよ!<br />
ってなった時に、<br />
<br />
<b> hoge.next(0,func1).next(100,func4).next(50,func2).next(50,func3);</b>
<br />
<b> 0フレーム目→100フレーム目(100を指定)→150フレーム目(50を指定)→200フレーム目(50を指定)</b><br />
<br />
って感じで、書き換えが頻繁になる気がする。<br />
結構、動画を作る立場で考えるに、こういう計算作業は極力やりたくないものでござるので、<br />
あまり経過フレーム加算のパターンを使うことは少ないかなーとか重いつつ。<br />
<br />
<br />
でもまぁ、メインでフレーム数を管理する変数を用意すれば良いだけなので、<br />
機能を追加するのは、たいした問題ではないのだけれども。<br />
というわけで、早速直した。<br />
Forkしたぜっ!イエイイエイ! <br />
<br />
<script type="text/javascript" src="http://jsdo.it/blogparts/6vVT/js?width=465&height=496&view=play"></script><br />
<br />
全部作っても一時間もかからなかったぜーい。<br />
動画メインのFlasherもHTML5とかでなんかやる時に、使いやすいと思いますよ。<br />
参考にしたブログ。<br />
<br />
メソッドチェーンの作り方 - あと味<br />
<a href="http://taiju.hatenablog.com/entry/20100307/1267962826" target="_blank">http://taiju.hatenablog.com/entry/20100307/1267962826 </a><br />
<br />
Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-70923431901396935402012-08-08T21:16:00.000+09:002012-08-08T21:16:45.866+09:00FizzBuzzってなんだよ。FizzBuzzってなんぞやと思ったら、世界のナベアツみたいなやつだった。<br />
<br />
<a href="http://ja.wikipedia.org/wiki/Fizz_Buzz">http://ja.wikipedia.org/wiki/Fizz_Buzz</a><br />
<br />
3で割り切れたら Fizz で、5で割り切れたら Buzz で、どっちでも割れたら FizzBuzz なんだとさ。<br />
出来るだけ短くプログラムを書くのが楽しいらしい。<br />
<br />
<span class="edit instapaper_title" id="description">業務プログラマがFizzBuzz書いたらどうなるか</span><br />
<span class="edit instapaper_title" id="description"><a href="https://gist.github.com/3292173" target="_blank">https://gist.github.com/3292173 </a></span><br />
<br />
<span class="edit instapaper_title" id="description">が面白かった。ガッチガチやぞっ!って感じ。</span><br />
<br />
<span class="edit instapaper_title" id="description">で、なんかとりあえず考えてみた。 Javascriptですけども。</span><br />
<br />
<span class="edit instapaper_title" id="description">var fizzbuzz = function(num){<br /> if(typeof(num) !== "number"){return "not a number";}<br /> if(num < 1){return "input 0 upper";}<br /> return (!(num % 15) ? "fizzbuzz" : (!(num % 3) ? "fizz" : (!(num % 5) ? "buzz" : num)));<br />};<br /> </span><br />
<span class="edit instapaper_title" id="description">for(var i = 0;i < 31;++ i){<br /> alert(fizzbuzz(i));<br />}</span><br />
<span class="edit instapaper_title" id="description"><br /></span>
<span class="edit instapaper_title" id="description">長ぇな。</span><br />
<span class="edit instapaper_title" id="description">最初の方の例外処理みたいなの無ければ</span><br />
<br />
<span class="edit instapaper_title" id="description">var fizzbuzz = function(num){</span><span class="edit instapaper_title" id="description"></span><br />
<span class="edit instapaper_title" id="description"> return (!(num % 15) ? "fizzbuzz" : (!(num % 3) ? "fizz" : (!(num % 5) ? "buzz" : num)));<br />};</span><br />
<span class="edit instapaper_title" id="description"> </span><br />
<span class="edit instapaper_title" id="description">だけでおっけーだけど、 </span><span class="edit instapaper_title" id="description">なんか、メンテナンスし辛いよなこれでは。</span><br />
<span class="edit instapaper_title" id="description"><br /></span>
<span class="edit instapaper_title" id="description">var fizzbuzz = function(num){<br /> if(typeof(num) !== "number"){return "not a number";}<br /> if(num < 1){return "input 0 upper";}<br /> var fizz = 3,buzz = 5;<br /> return (!(num % (fizz * buzz)) ? "fizzbuzz" : (!(num % fizz) ? "fizz" : (!(num % buzz) ? "buzz" : num)));<br />};</span><br />
<span class="edit instapaper_title" id="description"><br /></span>
<span class="edit instapaper_title" id="description">これで fizz と buzz の条件が変わってもOKだよねっ!</span><br />
<span class="edit instapaper_title" id="description">いやいや、それだったら、</span><br />
<span class="edit instapaper_title" id="description"><br /></span>
<span class="edit instapaper_title" id="description">var fizzbuzz = function(num,fizz,buzz){<br /> if(typeof(num) !== "number"){return "not a number";}<br /> if(num < 1){return "input 0 upper";}<br /> return (!(num % (fizz * buzz)) ? "fizzbuzz" : (!(num % fizz) ? "fizz" : (!(num % buzz) ? "buzz" : num)));<br />};<br /><br />var fizz = 3,buzz = 5;<br />for(var i = 0;i < 31;++ i){<br /> alert(fizzbuzz(i,fizz,buzz));<br />}</span><br />
<span class="edit instapaper_title" id="description"><br /></span>
<span class="edit instapaper_title" id="description">こっちのほうがいいよなぁ。うん。</span><br />
<span class="edit instapaper_title" id="description">FizzBuzzっていうゲームなんだから、ルールは関数の外で変わるんだから、こっちのほうが正しい。</span><br />
<span class="edit instapaper_title" id="description"><br /></span>
<span class="edit instapaper_title" id="description">グローバルが汚くても良いんなら、</span><br />
<br />
<span class="edit instapaper_title" id="description">i=0;while(i<31){alert(!(i%15)?"fizzbuzz":!(i%3)?"fizz":!(i%5)?"buzz":i);++i;}</span><br />
<span class="edit instapaper_title" id="description"><br /></span>
<span class="edit instapaper_title" id="description">こんな感じじゃね?使いまわせねーし読み辛いけど。78文字くらい。</span><br />
<span class="edit instapaper_title" id="description">もっと短くなるんだろうなぁ。凡人はこんなレベルです。</span><br />
<span class="edit instapaper_title" id="description"><br /></span>
<span class="edit instapaper_title" id="description">phpでFizzBuzz最短56Byte</span><br />
<a href="http://d.hatena.ne.jp/milieu/20100204/1265305089"><span class="edit instapaper_title" id="description">http://d.hatena.ne.jp/milieu/20100204/1265305089</span></a><br />
<span class="edit instapaper_title" id="description"><br /></span>
<span class="edit instapaper_title" id="description">PHPだけど、こっちのが短い。</span><br />
<span class="edit instapaper_title" id="description">なるほど、割り切れたらベースじゃないほうが結果として短くなるのか。</span><br />
<br />
<span class="edit instapaper_title" id="description">i=0;while(i<31){alert(i%15?</span><span class="edit instapaper_title" id="description">i%5?</span><span class="edit instapaper_title" id="description">i%3?</span><span class="edit instapaper_title" id="description">i</span><span class="edit instapaper_title" id="description"></span><span class="edit instapaper_title" id="description">:</span><span class="edit instapaper_title" id="description">"fizz"</span><span class="edit instapaper_title" id="description">:</span><span class="edit instapaper_title" id="description"></span><span class="edit instapaper_title" id="description">"buzz"</span><span class="edit instapaper_title" id="description"></span><span class="edit instapaper_title" id="description">:</span><span class="edit instapaper_title" id="description">"fizzbuzz"</span><span class="edit instapaper_title" id="description">);++i;}</span><br />
<br />
<span class="edit instapaper_title" id="description">これで 69文字か。</span>Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-68562477829076776612012-07-31T15:19:00.004+09:002012-07-31T15:19:34.495+09:00思いつきちょっと面白いアプリを思いついたので、作ってみることにする。<br />
できるかなぁ?Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-48576182292627469932012-07-22T02:16:00.000+09:002012-07-22T02:25:47.281+09:00javascript の 配列とかオブジェクトをコピーするClone Anything with JavaScript<br />
http://davidwalsh.name/javascript-clone<br />
<br />
難しそうだなーと思ったんだけど、テキトーにやってみた。<br />
リンク先にコメントを書いたんだけど、改行とかがグチャグチャになった。<br />
ごめんなさい外人さん。謝る英語がわかりません。<br />
あと、なんか見たらコメント消えてたから、書き直したら二重に投稿された。<br />
どうしよう。あわわわわわあわわわわわわ。 <br />
<br />
<div style="background-color: #fff2cc;">
var clone = function(o){<br />
var Clone = function(o){<br />
var self = this;<br />
if(o instanceof Array){<br />
for(var i = 0,l = o.length;i < l;++ i){<br />
self[i] = o[i];<br />
}<br />
}else{<br />
for(var n in o){<br />
self[n] = o[n];<br />
}<br />
}<br />
};<br />
if((!o)||(typeof(o) !== "object")){<br />
return o;<br />
}else{<br />
o = new Clone(o);<br />
return o;<br />
}<br />
};</div>
<div style="background-color: #fff2cc;">
<br /></div>
<div style="background-color: #fff2cc;">
</div>
<div style="background-color: #fff2cc;">
</div>
<div style="background-color: #fff2cc;">
/* 以下動きを検証している感じ */</div>
<div style="background-color: #fff2cc;">
<br />
var myObject = {hoge:"hogehoge"};<br />
var cloned = clone(myObject);<br />
alert("1 hogehoge と出て欲しい -> " + cloned.hoge);<br />
<br />
myObject.hoge = "ohohohoho";<br />
alert("2 hogehoge と出て欲しい -> " + cloned.hoge);<br />
cloned.hoge = "ababababa";<br />
alert("3 ababababa と出て欲しい -> " + cloned.hoge);<br />
<br />
var next_clone = clone(myObject);<br />
alert("4 ohohohoho と出て欲しい -> " + next_clone.hoge);<br />
alert("5 ababababa と出て欲しい -> " + cloned.hoge);<br />
<br />
<br />
var myArray = ["mogemoge","mugamuga","morimori"];<br />
var array_clone = clone(myArray);<br />
alert("6 mugamuga と出て欲しい -> " + array_clone[1]);<br />
myArray[1] = "uhiuhi";<br />
alert("7 mugamuga と出て欲しい -> " + array_clone[1]);<br />
<br />
var deep = {obj:{hoge:"huga",func:function(){alert("do something");}}};<br />
var deep_clone = clone(deep);<br />
alert("8 huga と出て欲しい -> " + deep_clone.obj.hoge);<br />
alert("9 次に do something と出て欲しい");<br />
deep_clone.obj.func();<br />
<br />
var myStr = "ho---ge";<br />
var str_clone = clone(myStr);<br />
alert("10 ho---ge と出て欲しい -> " + str_clone);<br />
alert("11 ababababa と出て欲しい -> " + cloned.hoge);</div>
<br />
別に<br />
<br />
<span style="background-color: #d9ead3;">var Clone = function(o){</span><br />
<span style="background-color: #d9ead3;"> if((!o)||typeof(o) !== "object"){return;}</span><br />
<span style="background-color: #d9ead3;"> var self = this;</span><br />
<span style="background-color: #d9ead3;"> if(o instanceof Array){</span><br />
<span style="background-color: #d9ead3;"> for(var i = 0,l = o.length;i < l;++ i){</span><br />
<span style="background-color: #d9ead3;"> self[i] = o[i];</span><br />
<span style="background-color: #d9ead3;"> }</span><br />
<span style="background-color: #d9ead3;"> }else{</span><br />
<span style="background-color: #d9ead3;"> for(var n in o){</span><br />
<span style="background-color: #d9ead3;"> self[n] = o[n];</span><br />
<span style="background-color: #d9ead3;"> }</span><br />
<span style="background-color: #d9ead3;"> }</span><br />
<span style="background-color: #d9ead3;">};</span><br />
<br />
<span style="background-color: #d9ead3;">var myObj = {test:"huga"};</span><br />
<span style="background-color: #d9ead3;">var cloned = new Clone(myObj);</span><br />
<br />
でも動くことには動くと思うんだけど、<br />
引数の o が object 以外だった時に、複製できない。<br />
<br />
if((!o)||typeof(o) !== "object"){this = o;return;} // <- エラーになる<br />
<br />
とか<br />
<br />
if((!o)||typeof(o) !== "object"){return o;} // <- 意味なし<br />
<br />
とか出来ないので、clone()の中で object かどうか判断してからーって感じです。<br />
<br />
きっと、俺でも思いつくので、外国の凄い人は思いついた上で採用していないのだろう。<br />
つまり、なんかしらこの方法だと問題あるんだろうなぁ。<br />
そこがわからないので、俺は未熟なんだろうなぁとおもいます。<br />
<br />
でも、とりあえず動くから良いよね!Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-84860001778121622872012-06-29T03:29:00.002+09:002012-06-29T03:31:03.408+09:00放置してました。放置していたというわけではなく、<br />
Googleのログインを二段階プロセスにしたのは良いのだけど、<br />
ログインコードが発行されるメールアドレスを携帯のメアドにしていて、<br />
その携帯が解約されてしまったので、ログインできなかっただけでした。<br />
うぉ~ん。最近めっきりプログラムを組んでいません。<br />
嘘です。そうでもないです。<br />
<br />
会社で使うのに適した顧客管理DBみたいなものを作ったのだけど、<br />
まぁ、そんなものくれてやるほどの価値もねぇ会社だよなってところが落としどころでした。<br />
プププププ。<br />
<br />
ていうか、思いのほか、アクセス数が落ちなかったので驚いた。<br />
これからもポチポチブログ書くかなー。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-68424512005926645752012-03-01T11:21:00.001+09:002012-03-01T11:21:19.243+09:00NAVERまとめのブックマークレットが何をしているのか見てみる #NAVERまとめ特に意味はないですけど、勉強がてらに見てみます。 <br />
<b>『コードリーディングとか出来ないぜ!頭皮から汁が出てくるぜ!』</b><br />
と思ってしまうのですが、<br />
ブックマークレットくらいからやるのが、俺くらいの技量の人間には丁度良いでしょう。<br />
<br />
取りあえず綺麗にしてみる。 <br />
<br />
<div style="background-color: #fff2cc;">
javascript:(function(){ </div>
<div style="background-color: #fff2cc;">
var d=document </div>
<span style="background-color: #fff2cc;"> ,w=window</span><br style="background-color: #fff2cc;" /><span style="background-color: #fff2cc;"> ,e=w.getSelection</span><br style="background-color: #fff2cc;" /><span style="background-color: #fff2cc;"> ,k=d.getSelection</span><br style="background-color: #fff2cc;" /><span style="background-color: #fff2cc;"> ,x=d.selection;</span><br style="background-color: #fff2cc;" /><span style="background-color: #fff2cc;"> try{</span><br style="background-color: #fff2cc;" /><span style="background-color: #fff2cc;"> s=(e?e():(k)?k():(x?x.createRange().text:''))</span><br style="background-color: #fff2cc;" /><span style="background-color: #fff2cc;"> }catch(e){</span><br style="background-color: #fff2cc;" /><span style="background-color: #fff2cc;"> s=''</span><br style="background-color: #fff2cc;" /><span style="background-color: #fff2cc;"> }</span><br style="background-color: #fff2cc;" /><span style="background-color: #d0e0e3;"> var l=d.location</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> ,e=encodeURIComponent</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> ,d=decodeURIComponent</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> ,g=function(s){</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> try{</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> d(s);return s</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> }catch(e){</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> return g(s.substr(0,s.length-1))</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> }</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> }</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> ,f='http://matome.naver.jp/bml'</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> ,p='?u='+e(l.href)+'&s='+e(s)</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> ,u=g((f+p).substr(0,2500))</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> ,a=function(){</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> if(!w.open(u,'njMTMBookmarklet','links=0,scrollbars=0,toolbar=0,status=1,width=520,height=653'))l.href=u</span><br style="background-color: #d0e0e3;" /><span style="background-color: #d0e0e3;"> };</span><br style="background-color: #d0e0e3;" /><span style="background-color: #ead1dc;"> (/Firefox/.test(navigator.userAgent))?setTimeout(a,0):a();</span><br style="background-color: #ead1dc;" /><span style="background-color: #ead1dc;"> void(0)</span><br style="background-color: #ead1dc;" />})();<br />
<br />
というわけで、綺麗になったところで、見ていきます。<br />
<b>前半</b><br />
<br />
<div style="background-color: #fff2cc;">
var d=document </div>
<div style="background-color: #fff2cc;">
,w=window<br />
,e=w.getSelection<br />
,k=d.getSelection<br />
,x=d.selection;<br />
try{<br />
s=(e?e():(k)?k():(x?x.createRange().text:''))<br />
}catch(e){<br />
s=''<br />
}</div>
<br />
<br />
getSelection は、文字列が選択されているかを見るやつなので、<br />
変数 s に e k x つまり、なんかかんか選択された要素があればそれを入れて、<br />
それがなければ s を空の文字列にするよとしています。<br />
<br />
<b>後半</b><br />
<br />
<div style="background-color: #d0e0e3;">
var l=d.location<br />
,e=encodeURIComponent<br />
,d=decodeURIComponent<br />
,g=function(s){<br />
try{<br />
d(s);return s<br />
}catch(e){<br />
return g(s.substr(0,s.length-1))<br />
}<br />
}<br />
,f='http://matome.naver.jp/bml'<br />
,p='?u='+e(l.href)+'&s='+e(s)<br />
,u=g((f+p).substr(0,2500))<br />
,a=function(){<br />
if(!w.open(u,'njMTMBookmarklet','links=0,scrollbars=0,toolbar=0,status=1,width=520,height=653'))l.href=u<br />
};</div>
<br />
<br />
ブックマークレットを起動したら、ウィンドウが開く(またはページ転移する)わけですが、<br />
そのウィンドウが開く先のURLを作っているところ。<br />
<br />
<br />
encodeURIComponent とか decodeURIComponent とか名前が長いので、e とか d とか変数に置き換えて、<br />
省略して書けるようになってますね。<br />
d は 前半部分で document だったけど、ここにきたら上書きされてしまいます。<br />
g っていうのが関数で、これは何をやってるのかというと、<br />
放り込まれた文字列をデコードすることを試みます。<br />
デコードできなければ文字列の長さを1個減らして(substring のところ)、もう一回自分自身にその文字列を放り込み、<br />
デコードが出来るまでそれを繰り返しています。<br />
で、その関数 g が出てくるのが次あたり。<br />
変数 f はブックマークレット用のエンドポイントURL(っていうの?)、<br />
変数 p は f のあとにくっつく文字列、つまり、ブックマークレットが開くURL (f + p) は、<br />
<br />
<div style="background-color: #e06666;">
http://matome.nave.jp/bml?u= encodeURIComponent( 開いているページのURL ) &s= encodeURIComponent(前半で作った選択された文字列) </div>
<br />
になります。で、<br />
変数 u で g が登場します。<br />
ブラウザというのは、開けるURLの文字数が決まっているので、<br />
<br />
<a href="http://support.microsoft.com/kb/208427/ja">http://support.microsoft.com/kb/208427/ja</a><br />
<a href="http://www.connect-i.co.jp/tipsblog/?p=6">http://www.connect-i.co.jp/tipsblog/?p=6</a> <br />
<br />
さっきの<br />
<br />
<div style="background-color: #e06666;">
http://matome.nave.jp/bml?u= encodeURIComponent( 開いているページのURL ) &s= encodeURIComponent(前半で作った選択された文字列) </div>
<br />
<br />
こいつが、ブラウザの開けるURL文字数を超えているとマズいので、<br />
g に <b>『 f + p して一端 2500 字でぶった切ったもの』</b> を投げて、<br />
それが decodeURIComponent できるかどうか、URLとして成立するかをチェックし、<br />
成立しなければ成立するまで文字数を減らしてから、変数 u に返します。<br />
<br />
で、関数 a は、そんな変数 u を小窓で開ければ開いて、<br />
ポップアップ禁止されてたりすれば、今開いてるページを、変数 u のアドレスに移動させます。<br />
<br />
<b>最後</b><br />
<br />
<div style="background-color: #ead1dc;">
(/Firefox/.test(navigator.userAgent))?setTimeout(a,0):a();</div>
<div style="background-color: #ead1dc;">
void(0)</div>
<br />
ここがわからん。 <br />
ユーザエージェント、つまり今見ているブラウザが Firefox っぽかったら(ユーザエージェントを偽装することも出来るからね)、<br />
何故かsetTimeoutで0秒待ってから、関数 a を実行してて、それ以外のブラウザは普通に関数 a を実行している。<br />
この違いが良く分からないなぁ。なんざんしょ。Firefoxには特別な何かがあるのであろう。<br />
調べるのめんどくさい。非同期ぽくしなきゃだめつーことですか?<br />
ブックマークレットを書き換えてどうなるか実験君してみればいいんだけどねぇ。やらない。めんどいから。<br />
<br />
そんな感じでした。嘘書いてたらごめんなさい。 <br />
<br />
開いたブックマークレットのウィンドウの中の<br />
<br />
http://static.naver.jp/matome_ver4/js/nj.matome.bookmarklet_xxxxxxxxxxxxxxx.js<br />
<br />
これとかは、そのうち読んでみたいなーと思います。<br />
<br />
久しぶりにブログ書いた。5000HIT超えました。<br />
<b>『上手くはないんだけどせっかくもらったしヘタとは言えないし飾らないわけにもいかない5000HITおめでとうトップ画像』</b>を<br />
ネット友達から貰う感じだね。これは。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-27734326262476672342012-02-24T09:14:00.002+09:002012-02-24T09:14:58.000+09:00NAVERまとめ疲れ #NAVERまとめないだろ?まだないだろ?<br />
NAVERまとめ疲れって書いた人居ないだろ!<br />
俺一番!俺いちばーーーん!いえーい!<br />
あんまり疲れてません。<br />
疲れたといえば、無駄に色んなGmailのアカウントの予備のメール扱いになってたので、<br />
それらを整理整頓してました。それに疲れました。<br />
プライバシーポリシーも変わるからさっ!エヘ!テヘペロ!<br />
ついでに『NAVERまとめとはなんだったのか』 とか言ってやる!<br />
ざまぁ!ざまぁ!アルファギーク()ざまぁ!<br />
<br />
別にNAVERまとめに疲れてはいないけど、要望はありますね。<br />
あ、NAVERまとめへの要望まとめを作ればいいのか。<br />
<br />
NAVERのご意見ご要望の掲示板はあって、<br />
<br />
<a href="http://uservoices.naver.jp/">http://uservoices.naver.jp/</a><br />
<br />
ちゃんとスタッフの人が(同じような返事が多いが)返事してたりして、<br />
amebaに比べたら100億倍マシだなぁとおもってみたりしています。でも、この公式の掲示板、どのサービス向けなのか、<br />
ユーザが一目見てわからないから、そこらへん何とかして欲しいと思います。<br />
その点、はてなのはてなアイデアってある種画期的ですよね。<br />
<br />
<a href="http://i.hatena.ne.jp/">http://i.hatena.ne.jp/</a><br />
<br />
というわけで、NAVERまとめへの要望まとめを作ってみた。<br />
<br />
<a href="http://matome.naver.jp/odai/2133004169489844101">http://matome.naver.jp/odai/2133004169489844101</a><br />
<br />
既に同様のまとめがあったら、そっちを使うべきだと思う。<br />
検索してない。エヘ!テヘペロ!<br />
うちの4歳の娘までテヘペロテヘペロ言い出してます。流行ってますね。<br />
そんな感じでした。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-62547741325961304342012-02-17T17:04:00.003+09:002012-02-17T17:04:34.541+09:00期待のJSゲームエンジン enchant.js でキーボードの入力だけ処理させる。enchant.js 触ってみました。<br />
参考にしたのがこちら。enchant.js でプログラム組む方法が良くわかる。<br />
<br />
<a href="http://www.4gamer.net/games/032/G003263/20110428001/" target="_blank">「enchant.js」でゲームを作ろう! HTML5とJavaScriptによるアクションゲーム制作入門 </a><br />
<br />
<br />
別に熊とかを動かしたいわけではなく、キーボードの入力だけを処理させたかったので、<br />
そういうことをやってみます。<br />
『キーボードの入力のためだけにenchant.js 使う必要なくない?』と言われそうですが、<br />
まぁ、ものは試し。男は度胸。何でもためしてみるのさ。 <br />
<br />
最初に書いたのがこんな感じ。<br />
なんとなく jQuery も使っています。<br />
<br />
<div style="background-color: #f4cccc;">
enchant();<br />$(document).ready(function(){<br /> var game = new Game(320,320);<br /> game.onload = function(){<br /> this.addEventListener("enterframe",function(){<br /> if(this.input.left) {alert("left") ;}<br /> if(this.input.right){alert("right");}<br /> if(this.input.up) {alert("up") ;}<br /> if(this.input.down) {alert("down") ;}<br /> });<br /> };<br /> game.start();<br />}); </div>
<br />
MACやスマホはわかりませんが、Windowsでキーボードの矢印キーを押すと、<br />
アラートが出ました。<br />
そこまではよかったものの、<br />
アラートが出続ける…あらら。こまったので、F5キーを連打しました(笑)<br />
で、書き直したのがこんな感じ。<br />
<div style="background-color: #d9ead3;">
<br /></div>
<div style="background-color: #d9ead3;">
enchant();<br />$(document).ready(function(){<br /> var game = new Game(320,320);<br /> game.onload = function(){<br /> this.addEventListener("enterframe",function(){<br /> if(this.input.left) {alert("left") ;this.input.left = false;}<br /> if(this.input.right){alert("right");this.input.right = false;}<br /> if(this.input.up) {alert("up") ;this.input.up = false;}<br /> if(this.input.down) {alert("down") ;this.input.down = false;}<br /> });<br /> };<br /> game.start();<br />}); </div>
<br />
いちいち それぞれのフラグを false にしてやるわけですね。<br />
これでアラート連発が無くなりました。<br />
<br />
まぁ、ただそれだけです。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-8421653123867927762012-02-16T23:26:00.000+09:002012-02-16T23:26:04.970+09:00node.js + jsdom + jQuery で Gumroadで売った商品をブログに貼るブログパーツ作った完璧に惰性。デザインのセンスなし。<br />
うわーんうわーん。<br />
このページのしたの方にはっつけてあります。<br />
なーんか、iframeってどうなのよ?知らんがな。<br />
<br />
なんか、NAVER まとめのブログパーツを no.de で動かしていたんだけど、<br />
サーバが変ぽいので、herokuに変えた。<br />
ついでに、それをイジって Gumroad のブログパーツもつくったった。<br />
<br />導入方法とかは、<br />
Gumroadで売った商品をブログに貼るブログパーツ作った。<br />
<a href="http://matome.naver.jp/odai/2132940047075673701">http://matome.naver.jp/odai/2132940047075673701</a><br />
<br />
ここに書きました。<br />
適当にやってください。<br />
<br />
ソースとか、書かなきゃ駄目か?大したことしてないからいいだろー。てへぺろ。<br />
<br />Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-79956296385447254452012-02-15T13:38:00.000+09:002012-02-15T13:38:02.435+09:00Gumroadについて<pre id="line18"><a href="https://gumroad.com/" target="_blank">Gumroad</a> っていう、自分の作ったものを Twitter とかで手軽に売れるサービスが話題になってます。 </pre>
<pre id="line18"></pre>
<pre id="line18">大体の流れとか、問題点とかは、</pre>
<pre id="line18"> </pre>
<pre id="line18"> <a href="http://www.itmedia.co.jp/news/articles/1202/14/news056.html" target="_blank">個人コンテンツ販売の新時代を開くか 「Gumroad」で同人誌を売ってみる (1/3) - ITmedia ニュース </a></pre>
<pre id="line18">
</pre>
<pre id="line18">ここを読んだらよくわかります。</pre>
<pre id="line18"><a href="http://matome.naver.jp/search?q=gumroad" target="_blank">NAVERまとめ</a> も結構あります。</pre>
<pre id="line18">
</pre>
<pre id="line18">日本製の派生サービスの <a href="http://ameroad.sakura.ne.jp/" target="_blank">Ameroad</a> っていうのもテストで始まってます。</pre>
<pre id="line18"><a href="http://www.itmedia.co.jp/news/articles/1202/15/news043.html" target="_blank">ITメディアの紹介記事ね。</a></pre>
<pre id="line18"> </pre>
<pre id="line18">Gumroad は 海賊版とか売られたりしたらやばいよ!という記事が多いですね。 </pre>
<pre id="line18"></pre>
<pre id="line18"></pre>
<pre id="line18"></pre>
<pre id="line18"> </pre>
<pre id="line18"> <a href="http://wildhawkfield.blogspot.com/2012/02/gumroad.html" target="_blank">Gumroad の危険性について早めに警鐘を鳴らします 物語を語ろう&#12290;物語を創ろう&#12290;</a></pre>
<pre id="line18"> <a href="http://wildhawkfield.blogspot.com/2012/02/gumroad_15.html" target="_blank">Gumroad の問題点についてもう少し掘り下げてみました&#12290; 物語を語ろう&#12290;物語を創ろう&#12290; </a></pre>
<pre id="line18"> <a href="http://tk2to.blogspot.com/2012/02/gumroad.html" target="_blank">RMB: もしあなたの著作物が知らぬ間にGumroadで売られていたら</a></pre>
<pre id="line18"><a href="http://www.blogger.com/goog_1944949368">
</a></pre>
<pre id="line18">実際に Gumroad で曲を売ったけど、100%自作曲じゃなくて、</pre>
<pre id="line18">東方(?シューティングゲームだっけ?)の曲のアレンジだったからテンパッた人の話。</pre>
<pre id="line18"> </pre>
<pre id="line18"> <a href="http://togetter.com/li/257757" target="_blank">話題のGumroadを使って楽曲を販売してみたAnitaSunの記録 - Togetter</a></pre>
<pre id="line18">
</pre>
<pre id="line18">昔iTunesで再生している曲タイトルを2ちゃんねるブラウザに送るアプリを作ってくれた fladdict さんが</pre>
<pre id="line18">なんか絡まれている様子のドキュメンタリ。</pre>
<pre id="line18"> </pre>
<pre id="line18"> <a href="http://togetter.com/li/257865" target="_blank">なんでGumroadに苦言まとめエントリ書く人は『黒いことしてバレると人生ゲームオーバーヤバい』ってことを、誰も書かないの?イデオロギー的な理由とかなの? - Togetter</a></pre>
<pre id="line18"> </pre>
<pre id="line18">海賊版うんぬんについては、概ね、どうとも思わないというか、fladdictさんの言ってるとおりだなと思う。</pre>
<pre id="line18">お金にする為に Gumroad を使うという前提がある以上、お金にならないことはやらないだろうし。</pre>
<pre id="line18">『お金がかかるものをタダで皆で使おうぜ!』という行動とは違うからなぁ。 </pre>
<pre id="line18">ていうか、fladdict さんに至っては、自分の作ったiPhoneアプリが散々割られているような人なのに、</pre>
<pre id="line18">よく冷静に分析できるなーと思います。</pre>
<pre id="line18"> </pre>
<pre id="line18">mixi の日記でも書いたけど、</pre>
<pre id="line18">オンザクラウドでパーソナルなタレントがマネタイズされるのは素晴らしいよねぇ。手軽だし。</pre>
海外法人だからどうだこうだっつったってさー、Twitterだって日本法人できるまで使わなかったの?とか思うし。 <br />
<pre id="line18">Googleは?Yahooは?実際Googleは日本に法人あるけど、安全なの?って思う。</pre>
<br /><pre id="line18">新しい手段が生まれることは素晴らしいと思うし、Gumroad を装うフィッシングサイトが怖いねーと思います。</pre>
<pre id="line18">機能やシステムより、その枠組みの外にある『人間の行動』が怖いわけだから。 </pre>
<pre id="line18">うまく言えないな。例えば、Gumroadの中に居れば安全、</pre>
<pre id="line18">Gumroad だと思って別なサイトに入った人のことはGumroadは守れない、</pre>
<pre id="line18">Gumroad は Gumroad に行きたい人を全て Gumroad に誘導出来ない、</pre>
<pre id="line18">Gumroad は Gumroad に似せたサイトへのアクセスを Gumroad に強制リダイレクト出来ない、という事か。</pre>
いずれにせよ、良くないサービスは廃れるだろうし、良くないサービスにならないようにサービスを運営する人は努力するだろうし、って思う。<br />
<br />
あー。マネタイズってところで思い出したけど、<br />
うちの嫁から聞いたんだけど、<br />
アメブロを使っている奥様の間で、ヤフオクとかを使わないで、<br />
アメブロの中だけで物の売り買いをしてるらしいよ。中古の子供服とか。<br />
他のブログサービスだとそういうのは禁止されているらしいけど、<br />
アメブロは禁止されていない(?)らしく、そういう売買の行動があるらしい。<br />
当然物品のやりとりに必要な個人情報とか、口座番号は、<br />
相手に開示したりするんだろうけど、そういうことに抵抗がないのはなんなんだろうな?と思う。 <br />
<br />
<br />
で、俺もGumroadで何か売ろうかなーという感じになってきたので、<br />
カリフォルニア州の法律的に問題が無ければ、<br />
アート作品として、ようじょのパンツ姿の写真を $10 で売ろうと思います。<br />
この記事のはてなブックマークのコメントにうp!と書いた人が10人以上居たら<strike>通報</strike>販売します。Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-48647788296084497122012-02-14T21:19:00.001+09:002012-02-15T21:14:01.319+09:00NAVERまとめのブログパーツを作った。<b>※2012/02/15 なんかサーバに繋がらなくなってるなぁ。なんでだろ。 </b><br />
<br />
公式を見ても、人気のまとめのブログパーツしかないみたいな感じだったので、<br />
よく確認もしないで作った。<br />
全然反省とかはしていない。<br />
公式のものがあるなら、それを使ったほうがいいし、<br />
公式のものがないなら、それが出来るまでの箸休めです。 <br />
<br />
動作は、このページの右側にあるやつを見て確認してください。<br />
使い方やなんやらは、<br />
<a href="http://matome.naver.jp/odai/2132921992271736701">http://matome.naver.jp/odai/2132921992271736701</a><br />
からどうぞ。<br />
<br />
最初は php でやろうかなーとか思ったんですが、<br />
勉強をかねて、node.js でやりました。 <br />
node.js で jsdom + jQuery でスクレイピングしているので、<br />
blogparts.no.de からのアクセスとかを 403 されたら使えなくなります。<br />
<br />
jsdom + jQuery でのスクレイピングは、<br />
過去に思いっきり自分用というか、当時の会社用で、<br />
×××の○○○○○をごっそり抜き出すようなものを作ったことがあるのですが、<br />
他の人がアクセスするようなものを作ったことが無かったので、<br />
http で サーバを立てるところからお勉強でした。<br />
<br />
NAVERのサーバにあるCSSを link rel したり png ファイル読み込もうとしたんですが、<br />
うまくいかない感じだったので、<br />
ソースに直で 長ったらしい CSS 書いたり、<br />
<br />
こちら<br />
<a href="http://www.kawa.net/works/js/data-scheme/base64.html" target="_blank">[JavaScript] dataスキームURI生成(画像データのBase64変換)</a><br />
で base64に画像変換してみたりしました。<br />
<br />
取り合えず、動いたので良かったです。<br />
<br />
あ、ソースコードはこんな感じです。インチキくさい。<br />
修正すべき点とかご指摘いただけたらと思います。不慣れなもんで。フヒヒヒヒ。てへぺろ。<br />
<br />
<div style="background-color: #d9ead3;">
var http = require("http"),<br />
url = require("url"),<br />
qs = require("querystring"),<br />
XHR = require("xmlhttprequest").XMLHttpRequest;<br />
jsdom = require("jsdom"),<br />
jq = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";<br />
var style = function(){<br />
var str = "";<br />
str += "*{font-size:10px;}";<br />
str += ".MdMTMTtlList01{margin-left:0;padding-left:0;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Item,.MdMTMTtlList02 .mdMTMTtlList02Item,.MdMTMTtlList03 .mdMTMTtlList03Item{display:table;*display:inline;width:100%;}";<br />
str += ".MdMTMTtlList01{overflow:hidden;*zoom:1;margin-bottom:-15px;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Item{margin:16px 0 0 0;padding:0 0 15px 0;border-bottom:1px solid #f2f2f2;margin-bottom:-1px;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Item:first-child{margin-top:0;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Thumb,.MdMTMTtlList02 .mdMTMTtlList02Thumb,.MdMTMTtlList03 .mdMTMTtlList03Thumb{display:table-cell;*display:inline;*zoom:1;width:60px;height:60px;padding:0 13px 0 0;vertical-align:middle;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Thumb a,.MdMTMTtlList02 .mdMTMTtlList02Thumb a,.MdMTMTtlList03 .mdMTMTtlList03Thumb a{display:block;width:60px;height:60px;overflow:hidden;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Txt,.MdMTMTtlList02 .mdMTMTtlList02Txt,.MdMTMTtlList03 .mdMTMTtlList03Txt{display:table-cell;*display:inline;*zoom:1;vertical-align:middle;word-wrap:break-word;table-layout:fixed;width:100%;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Ttl,.MdMTMTtlList02 .mdMTMTtlList02Ttl,.MdMTMTtlList03 .mdMTMTtlList03Ttl{display:inline;font-size:10px;font-weight:bold;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Ttl a:link,.MdMTMTtlList01 .mdMTMTtlList01Ttl a:visited,.MdMTMTtlList02 .mdMTMTtlList02Ttl a:link,.MdMTMTtlList02 .mdMTMTtlList02Ttl a:visited,.MdMTMTtlList03 .mdMTMTtlList03Ttl a:link,.MdMTMTtlList03 .mdMTMTtlList03Ttl a:visited{text-decoration:none;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Ttl a:hover,.MdMTMTtlList01 .mdMTMTtlList01Ttl a:active,.MdMTMTtlList01 .mdMTMTtlList01Ttl a:focus,.MdMTMTtlList02 .mdMTMTtlList02Ttl a:hover,.MdMTMTtlList02 .mdMTMTtlList02Ttl a:active,.MdMTMTtlList02 .mdMTMTtlList02Ttl a:focus,.MdMTMTtlList03 .mdMTMTtlList03Ttl a:hover,.MdMTMTtlList03 .mdMTMTtlList03Ttl a:active,.MdMTMTtlList03 .mdMTMTtlList03Ttl a:focus{text-decoration:underline;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Thumb+.mdMTMTtlList01Txt{width:593px;max-width:593px;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01Draft{color:#959595;font-size:10px;font-weight:bold;}";<br />
str += ".MdMTMTtlList01 .mdMTMTtlList01TimeStamp{color:#afafaf;font-size:10px;}";<br />
str += ".MdMTMTtlList01 .MdSocialCountList01{margin-top:2px;}";<br />
str += ".MdMTMTtlList01 .MdMsgDisp01{display:table-caption;margin-bottom:4px;}";<br />
str += ".MdSocialCountList01{margin-left:0;padding-left:0;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Li{display:inline-block;*display:inline;*zoom:1;margin-left:7px;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Li:first-child{margin-left:0;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Ico{display:inline-block;*display:inline;*zoom:1;overflow:hidden;margin:0;padding:0;border:none;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAAOCAYAAABToiApAAAFtUlEQVR42u2W61OTVxDG87fY/gHVD7ZTLR8FpioXrZf6SWZa0YEUW61tNd64SRStVdCxOFZRy1ArIIZ6C15AAjpEQtGg1hKScEkoSbgkJATydM++HMhLUJKvne7MM7tnzy6Z/NhzcjSVTTZklbZgs55UIryJJNcmmaMaEyqbbSDTSFUPhLHuyWhcolpV785jRqRqryE19zdWSo5QNedSeC3y1zj3damRexcR6urq3qra2tqY3Ixp4lW/tR2NF3VovKRbsE+zlUAWNvQi39BL3sbx4Zs2ZU2Se3svWhlsdLOApLcjLlGtqpdgCXAkCXIGIMFjuCSCKf2iX1rASswYfkIwjRU/QFrjeYpjYZqQfaYTKcVtSC5uxaqiViSTvjxjwbazlpmcUpN1XA0zs3UEG/6MxGjriwh+6Ve8zFGtqleZOoYmIbJSSAUVjyGNYq5Z7IsKMF5/CD6S8ByrNCklczytCcE8vwsIhyHs7oU9sTDpCDOweSYh8lSSMexNejXMjBYvNlimsPvVNO57IthhncJntO4JRLjn5lBE7HMuk2rfApOVKqRVoApzewJ48syBXfp6BhwPzIFhXyJKCKbD2gbzrUoACszbZ7+NhbnpCP3ni9q4oLKpB5+ftHD82hdmoAUGvid5YgX46Ob0pmGsN0+ypLX5phFtF5xT2N4VhqhVw+RjLqdRguWcsCcdDnnkWfHA7La70e1ws7faXSqvSO67OJ/IMTecysNUKIhIaFwZlBM5sTDFPZiUb4I0CTK7qh0rD7WgoEGBmXTYhLTCB6o/kPZgCOueBuk+DKLNO423WcnrSaQ9HIqBSWKQNKWsrIN/oPr2C+7ptg1TbEXWAQPVxAfT8qZvVp2sAYrZkzgv16x4J7O+XItwYAxTEyMQ5njeghtlWtwoJ5XlwnAmD66eDmgEoKRDCkzxy755ZjJfekMCpjzmHKcXqGGuNbqQaQqwss0TWMh0z4O8T7WqXgFRwpQx35XzrODn+O5MAcZqH0Q3ibwUTWJUrPbvnExnRwsele7AQ5LH3o2Q34dgwAdhzddOYr41XjpAR1XAzJ+DmVxkktPJAFfSRCaRZ5iFD1UfvubOIH56FYTRFUZ93yTGwxFEGefTm8dZq6k2ulcc5zmgs08hXiuT+Q/HpLjvTLvLy3K4pXxwuNir9xT/Tpjm6h/hPqIhoNsR8Lrg97gw4XVDmNP6FFXFX6CqZBuq9NmoOrIN7XfOK5O5XNeE+bZ8fzPrsvK2xIcUE1TVh69u6Ef6g1Hs7fCjdSgM18S0EMdFXQGk0R7ts6daVa/q+SPvTPJzMD20ThSmh4FJLyVzvYNReYrfBbP2mwwMFmpQuzsTQV8/gRxgz0Ny9TiCI/3wDw+whN09tweaT2jyGBzrseJ1zVhRaMaKomeq9arv1Y/nT+udSLvnQ5pR0VohWstc9B7VqnoFyP3lTSxd2aMZr8TC+gZH5V4cMFmqh7kaKoPj/Xgf7QKiu5hg7skgYD2Y9Njgd/ciHA7DYWnClYNbUDmjK/lb0Fp3DhoCRNDM+JhEnqAJtSs5BtrOOTruMTBT6+xYc8ej1m32MaLamEf7PgGRJCDuO/1IrBleJBKBY3CE90jxwVQZg1WBXMAWhencLiYzA8FhG8bdPRhz/Y2pUAi3LpVQLNa98JMXZijPg+bo1U4sy2vA0q8a8IHWgKVajskbhOf1MvJC+qsdqg+/8nIUqTW2WaVIydz1ub3LVBvdm6e/hyUbTyM5uwpLNpWTyrAq+1fKlc3m36f8e7TeedSYKEw5nRJk4jB3ZaAvXYMahkng+v6Cz/ka/rExvOm4hwrdelTsXUdaj/oyLdoaLnLjf0OxpgKZMEw63uaPlDvT8aIV9GhnjQ/3wVRziu9KX/9LIf4RsneZROP/WkhOSwsf8fuluag5sQO/0xOp9kQurh/Poffld6jhdQ6uH8tlL3r+BUKWD9+MsimDAAAAAElFTkSuQmCC') no-repeat 0 0;text-align:left;vertical-align:middle;text-indent:-9999px;*text-indent:0;*line-height:9999px;*word-wrap:normal;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Hatena .mdSocialCountList01Ico{width:12px;height:12px;margin-top:-4px;*margin-top:0;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Twitter .mdSocialCountList01Ico{width:12px;height:12px;margin-top:-4px;*margin-top:0;background-position:-15px 0;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Facebook .mdSocialCountList01Ico{width:12px;height:12px;margin-top:-4px;*margin-top:0;background-position:-30px 0;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Comment .mdSocialCountList01Ico{width:14px;height:13px;margin-top:-2px;*margin-top:0;background-position:-50px 0;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Good .mdSocialCountList01Ico{width:13px;height:14px;margin-top:-4px;*margin-top:0;background-position:-70px 0;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Comment,.MdSocialCountList01 .mdSocialCountList01Good,.MdSocialCountList01 .mdSocialCountList01View{margin:0 -2px 0 0;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Label{margin:0 5px 0 0;color:#7b7b7b;font-family:Tahoma,Arial,Helvetica,sans-serif;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Num{font-weight:bold;color:#7b7b7b;font-family:Tahoma,Arial,Helvetica,sans-serif;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Hatena .mdSocialCountList01Num,.MdSocialCountList01 .mdSocialCountList01Twitter .mdSocialCountList01Num,.MdSocialCountList01 .mdSocialCountList01Facebook .mdSocialCountList01Num{margin-left:4px;}";<br />
str += ".MdSocialCountList01 .mdSocialCountList01Comment .mdSocialCountList01Num,.MdSocialCountList01 .mdSocialCountList01Good .mdSocialCountList01Num{margin-left:5px;}";<br />
return str;<br />
}<br />
var app = http.createServer(function(req,res){<br />
res.writeHead(200,{"Content-Type":"text/html"});<br />
var prm = url.parse(req.url,true);<br />
if(req.method == "GET" && prm.query && prm.query.mode){<br />
var mode = prm.query.mode;<br />
if(mode != "matome.naver"){res.statusCode=403;res.write("403 Forbidden");res.end();return;}<br />
var usr = prm.query.usr.replace(/script|\"|\'|\(|\)|\{|\}|\:|\;|\,|function/gi,"");<br />
if(!usr || usr == ""){res.statusCode=403;res.write("403 Forbidden");res.end();return;}<br />
var naver = "http://matome.naver.jp/mymatome/" + usr;<br />
var xhr = new XHR();<br />
xhr.onreadystatechange = function(){<br />
if(this.readyState == 4){<br />
var con = this.responseText;<br />
var doc = jsdom.jsdom(con);<br />
var win = doc.createWindow();<br />
var body = "";<br />
jsdom.jQueryify(win,jq,function(win,$){<br />
body = $(".mdMypageMTMList01Item").html();<br />
res.write("<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'>");<br />
res.write("<style>" + style() + "</style>");<br />
res.write("</head><body>");<br />
res.write(body);<br />
res.write("</body></html>");<br />
res.end();<br />
});<br />
}<br />
};<br />
xhr.open("GET",naver);<br />
xhr.send();<br />
}else{<br />
res.end();<br />
}<br />
});<br />
app.listen(80);</div>Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0tag:blogger.com,1999:blog-8157838160391833043.post-88867115551378352592012-02-14T15:40:00.000+09:002012-02-14T15:40:29.337+09:00javascript で 出来る色んな事をまとめた。NAVERまとめでまとめました。<br />
<br />
JavaScript でこんなことも出来るのか!なまとめ<br />
<a href="http://matome.naver.jp/odai/2132918730570646901">http://matome.naver.jp/odai/2132918730570646901</a><br />
<br />
<br />
まぁ、Twitterで既に見た人も居ると思うけども。<br />
個人的に、『おっ!こんなこともできるのかー!』みたいのを纏めた。<br />
見た目的に凄いのもあれば、<br />
『こういうのはウィンドウズのアプリケーションじゃないと出来ないと思ってたよー』<br />
みたいなのもあります。 <br />
<br />
<br />
javascript っていうと、範囲が広いんだよなぁ。<br />
『こりゃ凄い』みたいなのを、素直な気持ちで纏めて行きたいと思います。<br />
他の人にとっては大したことなくても、<br />
俺にとって凄ければそれでいいじゃないの。人間だもの。みつを。 <br />
<br />
『一昔前というか、俺がインターネットを始めた時は、<br />
javascript って嫌われてたなー』<br />
<br />
というのを、ついつい、何度も書いてしまう。<br />
<br />
例えば、ゲームに関して言えば、 <br />
その頃のブラウザゲームというと、<br />
CGIで都度ページをリロードして遊ぶようなゲームだった気がする。<br />
FLASHも3が出たかどうかみたいな感じで。<br />
ブラウザで遊べるJAVAのゲームもあったけど、凄く重くて、みたいな気がした。<br />
その頃とは、凄く変わったんだなーと思う。<br />
<br />
ブラウザにプラグインを入れなくてもゲームが出来るってところは、<br />
凄い事だと思う。<br />
Java、Flashみたいに、なんか、コンパイルされたファイル(.jar とか .swf)じゃなくても、<br />
.js で誰でも作れる、中を覗ける、改造できるっつーのも、魅力ではあるよねぇ。<br />
<br />
でも、html に <embed> って書くか、 <canvas> って書くかに変わっただけな気もする。<br />
それが、凄いことなんだけど、不思議だよねぇ。<br />
<br />
<br />
javascript で pdf が作れる、 zip が作れる、 psd を開ける、 lzh を開ける、<br />
サーバが立てられちゃう、iPhone アプリが作れちゃうつーのは、<br />
とっても楽しいことだなーと思う。<br />
<br />
そういえば、<br />
javascript と同じようにあの頃嫌われていた ActiveX はどうなったんだろう。<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/02806898172247201473noreply@blogger.com0