localStorageのPCでの表示確認と格納場所(IE、EDGE、Chrome、Firefox)+1024文字制限
IEがどこにも乗っていなかったのでメモメモ。
各ブラウザでlocalStorage(ローカルストレージ・DOMストレージ)を使用すると、ローカルフォルダにデータが格納されます。
これによってブラウザを閉じてもデータが残り、いつでも使える仕組みになっているんですね。
キャッシュと同じ感じ。
Windwsでは大体いつもの場所に格納されます。
ブラウザのバージョンやOSバージョンが変わると、格納場所が変わってしまうことがあるので、必ずここに!というものではないのですが…
一旦現状の最新場所を書いておきます。(IEはどこにも乗っていなかったので)
※Macとかiosはしらないです…需要もなさそうだし。
■localStorageの格納場所
調べたのはWin7ですが、Win10でも同様だとおもいます。
基本は保護されたシステムフォルダになっているので、フォルダーオプションでチェックを外さないと表示できません。
・IE(11)
C:\Users\[ユーザ名]\AppData\LocalLow\Microsoft\Internet Explorer\DOMStore\[最新フォルダの中]\
C:\Users\[ユーザ名]\AppData\Local\Microsoft\Internet Explorer\DOMStore\[最新フォルダの中]\
ローカルストレージを保存した日ごとにフォルダが作られます。IE8~11はこの辺りにあるとおもいます。
Win7では「LocalLow」フォルダにあることに注意してください。(他のブラウザは大体Localフォルダに入っている)
「LocalLow」フォルダにない場合(Win10など)は「Local」フォルダに入っているようです
・Edge
C:\Users\[ユーザ名]\AppData\Local\Packages\Microsoft.MicrosoftEdge_[番号]\AC\[#!001]\MicrosoftEdge\User\Default\DOMStore\[最新フォルダの中]\
エッジはIEと同じような仕組みです。場所がわかりづらい…
ACのあとは#!001となっていましたが、複数ユーザの場合はそれぞれにフォルダがあります。
・Google Chrome(GC)
C:\Users\[ユーザ名]\AppData\Local\Google\Chrome\User Data\[Profile 1]\Cache\
ユーザごとに格納されています。他のデータと一緒に格納されているのと、暗号化されているようで中はよくわかりません。
・Firefox(FF)
C:\Users\[ユーザ名]\AppData\Local\Mozilla\Firefox\Profiles\[番号]\cache2\entries\
GCと同じく他のデータと一緒に格納されているのと、暗号化されているようで中はよくわかりません。
・その他ブラウザ
おそらく同じような箇所にあります。
AppData\Localフォルダ内にブラウザの名前が付いたフォルダがあるとおもうので、その中に格納されているとおもいます。
■localStorageの表示確認方法
ブラウザの開発ツールを使用するのが一般的です。
コンソールに以下を打ち込めば出てきます。
localStorage
GCなどではApplicationタブにLocal Storageがあるので確認できます。
ただしIEだけは注意が必要で、一つの変数で確認できるのは最大1024文字までです。
これはコンソール上で確認できる最大数であり、実際には1024文字以上も格納できますし、それを使用することもできます。
格納場所を調べてみれば、1024文字以上格納されているのを確認できるはずです。
IEブラウザ上での正確な確認方法は…たぶんないかとおもいます。
気になる方は変数を分けることで解決はしますが、あまりお勧めはしません(local1=前半、local2=後半)
なおEdgeは1024文字以上でも表示できますので、IE早く滅びてください。
Javascriptで階層が深いオブジェクト変数をリファレンスエラーにならずに存在チェックする方法
タイトル長い。
JSONなどで、階層が深いオブジェクトを使う時があると思います。そういうときに便利な関数。
■先にコード
まあコード見つけたので丸パクリというかほぼ転載です。
コード元:https://blog.mach3.jp/2016/12/05/ac2016-05.html
こちらをjqueryなしバージョンにしておきました。
var flg = ischeck_dig("obj.hoge1.hoge2.hoge3"); function ischeck_dig(path){ var a,b; a = window; path = path.split("."); for(b in path){ if(a === void 0){ break; } if(!a[path[b]]){ a = void 0; break; } a = a[path[b]]; } return a; }
■説明
JSONなどで、階層が深いオブジェクトを使う時があると思います。
↓こんなの
var obj = { "fir":{ "sec":{ "thi":"入ってるよ!" } } }
この場合、変数を「obj.fir.sec.thi」と書くと呼び出すことができます。便利だね!
しかし存在チェックをする場合は「obj.fir.sec.thi != undefined」としてもダメな時があります。
例えば「obj.hoge1.hoge2.hoge3」等を存在チェックするとどうなるでしょうか?
答えはリファレンスエラーになり、undefinedすら帰ってこず、コードが止まります。(参照エラーともいう)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Undefined_prop
「obj.hoge1.hoge2.hoge3」と書くと、obj.hoge1が存在なし(undefined)、obj.hoge1.hoge2は存在なしのところから参照しようとしているので、リファレンスエラーになるということです。
これを回避するためには、URLにも書かれている通りhoge1を作ってからhoge2の存在チェックをするか、エラーが起きる前に止めるしかありません。
エラーを起こさないように普通に書くとこうなります。
if(obj){ if(obj.hoge1){ if(obj.hoge1.hoge2){ …
うん、無理。面倒すぎる。
ということで関数でやりましょう。Rubyにはdigという便利な命令があります。
簡単に言えば「深い階層にある値を取得できて、Keyが見つからない場合もエラーにならずにNULLを返す」命令です。今回のやりたいことそのものですね!
それをjqueryで実装した人がいるのをみつけて、それをjqueryなしにしたのが今回のコードです。使えない時もあるからねjquery…
var flg = ischeck_dig("obj.hoge1.hoge2.hoge3"); function ischeck_dig(path){ var a,b; a = window; path = path.split("."); for(b in path){ if(a === void 0){ break; } if(!a[path[b]]){ a = void 0; break; } a = a[path[b]]; } return a; }
使う機会なさそうだからobjは取っちゃいました。つけたい人は元コードをみるのじゃ。(投げやり)
引数は文字列にします。関数内でsplitして、順番に存在チェックをしていく形。
void 0っていうのはundefinedのことです。
これでめんどくさいのとはおさらばできそう。
なぜ記事にしたかって?元コードがある記事が検索で全然引っかからなかったからだよ…検索仕方が悪かったのもあるけど。
tukihatu-alamode.rhcloud.comが落ちてる件
熱心なユーザーはもしかしたらコッチ見るかもしれないので一応。
現在なぜかhttp://tukihatu-alamode.rhcloud.comだけ落ちています。
サーバ再起動しても治らず(というか正常判定される)、どうしようもない状況です。すまぬ。
DNSがおかしいのかな?
時間経過で治るか待っているところです。
ah-placeholder.jsはplaceholder値と同じ文字を入力できない
ah-placeholder.jsを作ってくれた人はきっとすばらしいんでしょうけど…
ちゃんと仕様決めてないから「placeholder値と同じ文字を入力できない」っていうのが引っかかるときもあるようで。
ようやっとIE8からの呪縛から解き放たれたと思ったらIE8対応がまだまだある現実。
そんな中で「(私じゃない誰かが)作ったJSがIE8でうまく動いてない!直して!」と来たので見てみるとah-placeholder.jsさんこんにちは。
とりあえず用件的には
・placeholder値と同じ文字を入力できないからなんとかして
・何も入力していないとplaceholder値がフォームに送られてきてしまうからなんとかして
とのことでした。
正直placeholderなんて重要じゃないだろ、IE9以下はplaceholderなしにしようぜ…といつも思う。
しゃーねーなーと思っていたら作った人が現れて
「こっちのJSに変えてください(どこからか拾ってきた)」
というのでラッキーと思い実装。
大体OKでしたがtextarea関係で見過ごせないバグがあったので微修正。
placeholderはIE9も対応できていないため、IE9が死ぬまでまだまだこれからも使いそうです。
一応ソース乗せておきます。ほぼ人のソースだけど。
元ソース検索したんですがヒットしなかった。たぶん持ってきた人がさらに改修したのだろう。
転勤元がわかったら教えてください。楽させてもらったしぜひ紹介したいので^^;
使い方はjqueryを実装してplaceHolder属性を使うだけです。
JSを
<!--[if lte IE 9]> <script src=""></script> <![endif]-->
で囲えば完璧です。
JS $(function() { function placeHolder() { $('[placeholder]').each(function() { var inputW = $(this); if(!inputW.closest('.inputWrap').is('*')){ inputW.wrap('<span class="inputWrap"></span>'); } var wrap = inputW.closest(".inputWrap"); var label = $('<label />').appendTo(wrap); label.attr({'for': inputW.attr("id"), 'class': 'placeholder01'}).html(inputW.attr('placeholder')) if(wrap.find('textarea').is('*')){ wrap.addClass('inputWrapTextarea'); } inputW.focus(function () { label.hide(); }).blur(function () { if (this.value == '') { label.show(); } else { label.hide(); } }); $(document).on('click', '.inputWrap > label', function() { $(this).siblings('input,textarea').focus(); }); if ($(this).val()) { label.hide(); } }); } placeHolder(); });
CSS .inputWrap { position: relative; } label.placeholder01 { position: absolute; top: 2px; left: 5px; color: #999; font-size: 16px; white-space: nowrap; cursor: text; } .inputWrapTextarea .placeholder01{ display:inline-block; width:92%; top:auto; margin-top:7px; white-space:normal; }
PHP7をEXEにコンパイルする方法(PHP7+WinBinder+VBS)
試行錯誤の結果実行ファイルできたっぽいので、やり方を書いておきます。
環境:WIN7home
長い前置きを飛ばしたい方はこちら
最近いろいろあって、PHPを実行ファイルに変換する方法を探していました。
検索で調べてみると「bamcompile」と「HC-Standalone-S+」というツールの二つを発見。
WinBinderで表示デザインをしてツールでコンパイルすればOKということなのでやってみました。
一つ目のbamcompileはPHPの実行エンジンを組み込んでいるのでコンパイル後は単体で動作可能。
しかし組み込まれている実行エンジンがPHP4のため古い。
またキャッシュの影響なのかコンパイルに成功したり失敗したりでとにかく安定しませんでした。
二つ目のHC-Standalone-S+は最新のPHP7が使えてツールがGUIのため多少わかりやすかったです。
しかしアプリケーションタイプのwindowsでは環境のせいかどうしてもコンパイル後に起動できず、WinBinderを使ったWindowsアプリケーションは作成できませんでした。(ブラウザモードなら作成できた)
ほとほと困り果てて、「PHPバージョンはもうなんでもいいからちゃんとPHP+WinBinderを(現環境で)コンパイルできるツールはないのか!」と探していたところ、見つけました!
それがこちらのツール「P2X」です!(ででん!)
http://www.vector.co.jp/soft/dl/win95/prog/se365730.html
自分で言うのもなんですが、よくこのツール見つけられたな…というレベルの引っかからなさ。
それもそのはず、このツールは2005年に作られて更新されていないので古いし、作ったサポートホームページはとっくに消滅しているからです。
なのでダウンロードできなくなったら終わり…はやくダウンロードするんだ!(消えたら再配布するかもしれん)
P2Xは自分で用意したPHP実行エンジンごとEXEファイルにコンパイルできます。
その仕様のおかげでPHP7やPHP5の最新版にも対応させることができます。古いツールですが、WIN7でも動きました。
難点としては実行エンジンごとコンパイルするので容量が重い(最小容量が8MBぐらい)のと、起動時にCUIのコンソールが表示されてしまうことと、閉じ方が悪いとTEMPフォルダに残ってしまうことですかね。そのあたりはこの後説明します。
商用利用はメール連絡するように書いてありましたが…このメルアド生きてるのかなw
ではやり方を順に説明していきます。
必要なファイルが多くダウンロードするものがいっぱいあります。
リンクは無断記載なので怒られたら直します。(棒)
初心者なので説明わかりにくいです。暗号化などは無視しています。やり方はあると思うので調べてみてください。
環境によってはうまくいかないこともあるかもしれませんのでご了承ください(ぺこり)
(追記)
作ることはできるのですが、MVCなどの機能はないため、思っているようなプログラムは作れないかもしれません。ちゃんとしたものを作りたい場合はVC++のほうがいいと思います。
1.P2Xをダウンロードする。
メイン環境のP2Xをダウンロードします。コード編集などもこのフォルダ内で行うことになりがちなので、使いやすいところに環境を作ってください。
今回は「C:\p2x\」とした場合で話を進めます。
「P2X」
http://www.vector.co.jp/soft/dl/win95/prog/se365730.html
フォルダ階層はこうなっています。
p2x ├ pack | └ index.php ├ sample ├ devp2x.exe ├ p2x.exe ├ pkp2x.exe └ readme.txt
readmeに使い方が詳しすぎるほど乗っています。サンプルは使わないので削除してもOK。今回devp2x.exeの使い方も割愛します。
「pack」フォルダ内にコンパイルするデータを入れることになります。
今回は作業フォルダとしても使っていますが、作業フォルダは別に作ってもかまいません。
2.PHP実行エンジンをダウンロードする。
プログラムで使いたいPHPバージョンの実行エンジンをダウンロードします。(重い)
今回使用したのはphp7.0.1です。VC14 x86 Thread Safeをダウンロードします。
http://windows.php.net/download/#php-7.0
PHP5の場合はWinBinderが対応している5.3.3がいいと思います。この後の環境づくりはPHP7でもPHP5でもあまり変わりません。
古いのでアーカイブからダウンロードしてください。
http://windows.php.net/downloads/releases/archives/
php-5.3.3-Win32-VC9-x86.zip
3.P2X環境にダウンロードしたPHP実行エンジンをコピーする。
一つのプログラムにつき一つのPHP実行エンジンが必要になりますので移動よりコピー推奨です。
「pack」フォルダ内にPHP実行エンジンをフォルダごとコピーして、フォルダ名を「php」にリネームします
p2x ├ pack | ├ index.php | └ php(php-7.0.1-Win32-VC14-x86をリネーム) | ├ dev | ├ …… | └ php.ini(php.ini-developmentをリネーム) ├ p2x.exe ├ pkp2x.exe ├ compile.bat(自作) └ cuistart.bat(自作)
コピーしたら早速動作チェックしてみましょう。index.phpには最初からハローワールドが書いてあります。
php.iniはどちらでもいいですが今回はphp.ini-developmentをリネームします。
「P2X」はCUIで呼び出す必要があるのでバッチファイルを作ります。今回はcompile.batとします。
テキストファイルをcompile.batにリネームして、中のテキストを下のように書きます。
compile.bat
pkp2x.exe pause
pauseは無くてもOKだけど一応。作成したら上のフォルダ階層のように置いてください。
compile.batを実行します。
成功と出ればコンパイル完了です。
フォルダ内に「a.exe」というファイルができています。P2Xの場合は作成されるファイル名を変更できません。
a.exeを実行するとハローワールドが表示されます。すぐ閉じてしまうのでCUIテストのためにcuistart.batも作っておきましょう。
cuistart.bat
a.exe pause
cuistart.batを実行します。
クレジットの後にハローワールドが表示されます。「P2X」で作ったものは必ずクレジットが入ってしまいます。最終系がGUIであれば関係ないですが、消したい人はバイナリエディタでがんばってください。
エラーになったり、ハローワールドが表示されない場合は何かがおかしいです。
おかしいところが無い場合は、現在の環境では「P2X」を使えない可能性がありますのでこの後の説明は役に立ちません。ブラウザバックしてください…またきてね!
4.PHP実行エンジンを軽量化
無事コンパイルできたら容量を確認してみてください。とてつもなく重いです。
これは「pack」フォルダ内のすべての要素をコンパイルしているからです。「php」フォルダ内の殆どのファイルはいらないので整理します。
p2x ├ pack | ├ index.php | └ php | ├ ext | | ├ php_mbstring.dll(使うdllだけ) | | └ …… | ├ php.exe | ├ php7ts.dll(php5ts.dll) | └ php.ini ├ p2x.exe ├ pkp2x.exe ├ compile.bat └ cuistart.bat
php実行エンジンはは、「php.exe」と「php7ts.dll」さえあれば動きます。
さらに設定用の「php.ini」と拡張機能の「ext」フォルダを残しておきます。
その他のフォルダとファイルは基本使わないので削除しても大丈夫です。使う場合だけ残しておいてください。
「ext」フォルダ内も使わない拡張機能は削除しておきましょう。特に目的がなければmbstring以外いらないでしょう。今回はmbstringだけで進めます。
これで再度コンパイルすると9MBぐらいにはなるはずです。
もっと容量を減らしたい場合はphp.ini内のコメントを削除するとかしてください。
php.iniの設定は追加するdllがあるので後でやります。(もちろん今やっておいてもOK)
5.WinBinderをインストール
PHPをGUI化するのに今回は「WinBinder」を使うのでダウンロードします。
最新版でいいと思います。WinBinder.2010.10.14.zip
http://winbinder.org/download.php
古いphpバージョン(5.1以下)を使う場合はWinBinder-0.46.0.zipもダウンロードしてください。
「php」フォルダ内にコピーします。
p2x ├ pack | ├ index.php | └ php | ├ ext | | ├ php_mbstring.dll | | └ php_winbinder.dll(WinBinderの拡張dll) | ├ WinBinder | | └ phpcode | | └ include | | ├ …… | ├ php.exe | ├ php7ts.dll(php5ts.dll) | └ php.ini ├ p2x.exe ├ pkp2x.exe ├ compile.bat └ cuistart.bat
「WinBinder」フォルダ内も同じくいらないファイルがあるので削除します。
「phpcode\include」フォルダと「binaries」フォルダ以外はいりません。
「binaries」フォルダにはPHPの各バージョンにあわせた「php_winbinder.dll」が入っていますので「ext」フォルダに移動させてください。
移動させたら後はいりませんので削除してください。
最新版にはphp5.3.3だけが入っています。
php7の場合はヒラタクリエイトさんが提供?しているものを使用しますのでダウンロードしてください。(提供元が確認できませんでした)
WinBinder_PHP-7-0.zip
https://docs.google.com/uc?authuser=0&id=0B76nq_y0gvBpcHVuR003UlRIZnM&export=download
php5.1以下はWinBinder-0.46.0.zipに入っています。
バージョンにあわせた「php_winbinder.dll」がない場合は動かない可能性がありますので注意してください。
6.php.iniの特殊設定
「P2X」での設定と「php_winbinder.dll」を使うための設定します。
php.ini
//extension_dirを以下に変更(P2Xでのルール) extension_dir = "<<TEMP>>/php/ext/" //extensionはmbstringを使うのでセミコロン外す extension=php_mbstring.dll //extensionの下にphp_winbinder.dllも追加 extension=php_winbinder.dll //date.timezoneを東京に date.timezone = "Asia/Tokyo" //mbstringの設定(お任せで) mbstring.language = Japanese mbstring.internal_encoding = UTF-8 mbstring.http_input = auto mbstring.http_output = UTF-8 mbstring.encoding_translation = Off mbstring.detect_order = auto
7.メイン環境完成+動作テスト
これでメイン環境の構築は完了です。お疲れ様でした。
あとは用途に応じて追加していってください。
動作テストをします。
今回は自分で作るのが面倒だったのでサンプルプログラムをお借りします!お借りします!すいません!
http://www.pahoo.org/e-soul/webtech/php04/php04-04-01.shtm
サンプルプログラムから「makepassword.phpw」と「makepassword.rc」を「pack」フォルダにコピーします。
p2x ├ pack | ├ index.php(makepassword.phpwをリネーム) | ├ makepassword.rc | └ php | ├ ext | | ├ php_mbstring.dll | | └ php_winbinder.dll | ├ WinBinder | | └ phpcode | | └ include | | ├ …… | ├ php.exe | ├ php7ts.dll(php5ts.dll) | └ php.ini ├ p2x.exe ├ pkp2x.exe ├ compile.bat └ cuistart.bat
「makepassword.phpw」は「index.php」にリネームします。「P2X」では最初に呼ばれるソースはindex.phpで固定です。
「P2X」ではこのままでは動かないため、「index.php」を一部修正します。
index.php
include 'php/WinBinder/phpcode/include/winbinder.php'; // WinBinderライブラリ eval(parse_rc(file_get_contents(dirname(__FILE__).'/makepassword.rc'), '$mainwin', NULL, ResizableWindow, APPNAME, WBC_CENTER, WBC_CENTER, 320, 280, 0, 0));
修正は適当です。もっとうまいやり方あると思うのでお任せします。
修正したら「compile.bat」を実行してコンパイルします。
今回はGUIなので「a.exe」をそのまま実行して動作確認できます。サンプルプログラムのGUIが表示できれば成功です。
動かなかった場合は「cuistart.bat」を実行するとエラーを表示できるのでそこを修正しましょう。
注意として、動作中にコンソールを強制的に閉じてしまうと(右上の閉じるボタンなど)、TEMPフォルダにプログラムがたまってしまうのでお気をつけください。
8.コンソールを消すためにVBSから起動する
プログラムはコンパイルできて完成しましたが、GUIプログラムでもコンソールが残ってしまいます。
「P2X」では必ずCUIでのコンパイルになるので非表示にできません。
また、うさみみハリケーンなどでCUIからGUIに変更してみてもバイナリエディタで文字削ってみてもコンソールを非表示にはできませんでした。
仕方が無いので単体プログラムを諦め、VBSから起動します。
p2x ├ pack | ├ index.php | ├ makepassword.rc | └ php | ├ ext | | ├ php_mbstring.dll | | └ php_winbinder.dll | ├ WinBinder | | └ phpcode | | └ include | | ├ …… | ├ php.exe | ├ php7ts.dll(php5ts.dll) | └ php.ini ├ p2x.exe ├ pkp2x.exe ├ compile.bat ├ cuistart.bat ├ bin.exe(a.exeをリネーム) └ start.vbs
a.exeでは格好が悪いので好きにリネームします。今回はbin.exe。
start.vbs
Set ws = CreateObject("Wscript.Shell") ws.run "bin.exe", vbhide
「start.vbs」を書いたら実行します。実行するとGUIだけを表示することができました。
MakeExeを使ってvbsをEXEファイルに変換します。
http://www.vector.co.jp/soft/winnt/prog/se389017.html
最終的に提供するプログラムは「bin.exe(メインプログラム)」と「start.exe(bin.exeを呼び出すだけのプログラム)」の二つになりました。
これだったら他のも外でよかったな…
etc.P2Xについて
有能なツールですが弱点は結構ありそうです。
・入出力のプログラムのネームが固定のため複数のプログラムを作るときは混同しがち
・コンソールから強制終了するとTEMPが消えずに残るので容量圧迫する(p2x0〜)
・暗号化はしてくれない
側の用意は整ったのであとは中身を作りこむだけですね…
Win7でbamcompileを使うと正しくEXE化できたりできなかったり
未解決。
さすがにbamcompileが古いのでできないのかもしれませんが、
サンプルをコンパイルするとうまくいったり行かなかったりします。
うまくいくのは最初に起動したときだけ。
うまくいかない時は、アイコン指定しているのにアイコンが表示されなかったり、容量が500kbぐらいになってしまったりします。最初に起動したときでも失敗することも。
おそらく…というかほぼキャッシュのせいだと思うのですが、互換モードにしてもtempフォルダを削除してみても効果なし。
ううーん?
まあWin7と昔のWinとでコマンドプロンプトの種類が全然違うと思うのでおかしくなっているのかもしれない。
VirtualBoxでWINXP起動してやってみたいんだけど職場ではできんしなぁ。
いったんパソコン再起動するのも面倒だしううむ。再起動するしかないのかなぁ。