BLOGブラウザをテキストエディタっぽく使うサンプルを作ってみたら意外に単純にできますたHTML/CSSコーディングTwitterFacebookはてブPocketLINEコピー2013.01.31スポンサーリンクなんだかidea*ideaさんのたった一行でブラウザをシンプルなメモ帳に変える方法という記事が話題になってまして、ブラウザをメモ帳代わりにするっていうお話なんですが...いろいろ調べてるうちにブラウザ上で動作するエディタができちゃいました。contenteditable>というのを入力して開くと、ブラウザ自体がメモ帳のようにテキスト入力できるようになるよ!というネタでして、確かにテキスト入力すると書き込めるようにはなってるんですが残念ながら保存はできません。ブラウザの【保存】でもhtmlとしてしか保存できないしなんだかテキストは実態参照になって(chromeで保存した場合)たり...といった感じなのです。HTML5.JPなかなか詳しく難しく書いてますが、要するにHTMLタグにつけることのできる属性で、これの値をtrueにしておくとブラウザ上で表示したときにそのタグ内がユーザー側で編集可能になるってことらしいです。こんな属性全然知りませんでしたー、勉強になりましたね。深く追求するとネストした場合に子要素がその属性を継承するかどうかとかいろいろあるみたいですがいったんそれは置いといて、例えばdiv要素なんかにも【contenteditable】をtrueにしとくとフォームのテキストボックスとか使わないでも文字列の書き込み可能なハコができちゃうってわけです。件の例ではhtml要素自体に【contenteditable】を設定してるのでブラウザがさもテキストエディタのように振舞っているようです。Storageは、ユーザーのローカル環境(ブラウザ)にデータを保存するための仕組みです。データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことができます。Storageを利用すると、ユーザーごとにカスタマイズされた情報を提供することが可能となります。必要十分なデータをユーザーのローカル環境に保存することなどが可能となります。Storageには、sessionStorageとlocalStorageの2種類のストレージが用意されています。データの有効期限などが異なるので目的に応じて使い分けます。Storage-HTML5のAPI、および、関連仕様より。超ざっくりいうと今までweb上のデータをローカルに一時保存してたいわゆる「クッキー」の進化版みたいなもんです。保存できるサイズが5MBまでと結構大きく、データは永続的に有効ってのでなかなか便利そうです。先ほどの【contenteditable】属性を指定したdiv要素の中身をJavaScriptで取り出してローカルに保存できんかなぁ、と作ってみたのがコチラ。見ての通りデカいテキストボックスみたいのがありまして、ここにテキストを自由に書き込めます。【save】ボタンでローカルストレージにデータを保存し、【load】ボタンで前回保存したデータを呼び出すというものです。実際サンプルページみてもらうと動作はわかると思いますがテキストエリアに適当に何か書き入れて【save】ボタンを押す。ページをリロードまたはブラウザ再起動してみて【load】ボタンを押すと前回保存した値が呼び出される...はずです。確認したブラウザですが、chrome・safari・firefox・IE8(!)はOK、FirefoxとOperaはダメでしたのでサンプルページは対応ブラウザでご覧下さいまし。スポンサーリンクソースなど上記のサンプルはこれまで言ったとおり【contenteditable】を指定したdiv要素とwebstorageを使いJavaScriptでその辺をゴニョゴニョして動作するようにしてます。HTMLソースは以下のようになります。/></form></body></html>ちょっと長くてゴメンネ。body内のコンテンツ部分のタグから。onclick="cleartextarea()">ここにテキストを入力</div>いきなり出てきました【contenteditable】。【textarea】というidを持つdiv要素に【contenteditable="true"】を設定します。ここが実際のテキスト入力エリアになります。フォームのテキストボックスとか使っても良いんですがせっかく新しく覚えたことなので。/></form>フォームのセットにボタンを二つ作って保存(save)・読み込み(load)を動作させるためのボタンです。いずれも【onclick="~"】でJavaScriptの関数を呼び出し、押すと実行するようにしてます。ボタンクリックでJavaScript動作(関数実行)させるごくごく一般的なやり方だと思います。テキストの保存さて実際に動作の定義をする関数はhead内のscriptタグ内に記述してます。3つほど関数定義してるんですがその前にグローバルな変数を定義してます。0;【localStorage】ってのがwebstorageを使うための宣言部分です。webstorageも2通りあって【sessionstorage】:ブラウザ起動中のみ値を保存。終了すると破棄される【localStorage】:ブラウザを終了・再起動させても値を保持という使い分けができます。ここではそのままデータを残しておきたいので【localStorage】を使って【storage】という変数に入れときます。【clssw】は本論とはあんまり関係ないんですがテキストエリアを最初にクリックしたときに初期値(「ここにテキストを入力」というテキスト)をクリアするためのスイッチです。value);}これです。【getElementById】でテキストエリアのオブジェクトを取得。value)】ってのが実際に保存する動作です。Webstrageではこのようにキーと値をセットにして【.setItem】というメソッドで保存の実行をします。textContent.innerText;】で先ほど取得したオブジェクトのテキスト内容を突っ込んでます。【.innerText】ではなく【.innerHTML】としたくなるところですが、【contenteditable】を指定した要素の内容は改行ごとにさらにdivでネストされたりする(ブラウザによって挙動が違うらしい)のでタグは省いてテキストだけ取り出してます。1;}ここが保存されたデータを呼び出す部分です。【storage.getItem("saveeditor")】のように【.getItem】でキーを指定するとその値(value)を取り出すことができます。【loaded】という変数に一時格納。【getElementById】の【.innerText】でテキストエリアの中身を置き換えてるという次第。テキストエリアのクリアこれが本論とは関係ない部分ですが、ページを読み込んで最初にクリックしたときにテキストエリアのクリアをしちゃうという関数。1;}見ての通りテキストエリアを【getElementById】で取得して、【.innerText】で中身を空っぽのテキスト("")に置き換えているだけです。1;これはこの関数内のif分を動作させるためのスイッチのです。clsswが0のときのみクリックでテキストエリアをクリアします。保存したものを呼び出した後に最初のクリックとなっったり、2度目以降のクリックで中身消えちゃうとまずいので読み込みの関数やクリアの関数の中でスイッチの値を1にしてそれ以降はクリアしないようにしています。スポンサーリンクおまけ・CSSというわけでJavaScriptでの動作がメインなので面倒な装飾はしてないですが一応CSSのソース出しときます。10px;}特に面白くもなんともないです。テキストエリアのdiv要素はbox表示にしてoverflow-x:hidden;overflow-y:scroll;縦スクロールのみ許可にしてます。なんとなくテキストボックスっぽくなるように。実際行数が増えるとちゃんと縦スクロールバーがアクティブになると思います。スポンサーリンクまとめなんだか【contenteditable】属性から全然離れた話になっちゃいましたが、興味持ったらちょっと調べものして連鎖的に色んなことを知るのは面白いですなぁ...で知ったことはそれで終わりにしないで実際コードを書いてみる。いうのはWeb系の技術身に着けるには多分凄く大事な気がします。成果品としてはWebページとして表示してるのでローカルオンリーで使えるものではなくなっちゃいましたが、これブックマークレット化したり、Textファイルとして吐き出すの実装したらそれこそ「ブラウサをメモ帳」として使えるようになるかも。そのうち気が向いたら私もやるかもしれませんが、だれかチャレンジしてくれないかなぁ?んじゃまた。BLOG関連記事HTML/CSSコーディングCSSのみ画像不要のドット柄背景の作り方を若干丁寧に説明してみるドット柄を見ると職業柄ついパンチングメタル(等ピッチ穴明きの鉄板)を思い出すゴロドクさんです、どうも。「CSSのみ画像不要のストライプ柄背景~」という記事に引き続き、CSSのみの背景パターンの作り方の解説です。今回はドット柄に挑戦です。今春(2011年5月)に最終草案となりある程度安定した仕様がかたまりつつあるHTML5。チートシート/リファレンス系サイトまとめ先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。久々にWeb制作?ネタです。釣りのネタ書こうと思って久々に自宅のPCでnotepad++立ち上げたらEmmetの展開が死んでました。私は基本的にブログの記事はhtmlで記述できるところは最初からhtmlで記述しています。解説ページや技術系のページなんかでは数式表現を用いなければならない場面ってありますよね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。(1)スポンサーリンクタイトルとURLをコピーしました。