NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

便利かも?ブラウザのタブを簡易メモにする方法

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1325日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

これはおもしろいですね。

新しくタブを開いてロケーションバーに

と書くと、タブ全体がメモ帳のように文字を入力できるようになります。

ためしてみた。

ページを保存すればHTMLとして保存もできます。

何か一時的にメモっておくのにいちいちテキストエディタを立ち上げるのが面倒くさいときはいいかもしれませんね。

でもリロードすると消えるのでそこだけ注意ですね。

どうなってるの?

これはHTMLのcontenteditableというものを使ってますね。

DIVとかの通常編集できない要素を編集可能にするもので、実はTwitterのウェブサイトなんかでもツイートの入力欄で使われています。

Twitterで使われてるところ

使い方も簡単で、

みたいにすると、このDIV要素はtextareaのように入力できるようになるんですね。

なんでtextareaじゃダメなの?

Twitterのツイート入力欄は文字数制限を超えると超えた文が赤くハイライトされます。

ですがフォームのtextareaじゃ途中から文字の色を変えたりはできません。

そこでこのようにDIVを編集可能にしておいて、JSとかで140文字をオーバーしたらそれ移行の文字をemタグで囲い、そこにCSSを記述しているようでした。

因みにこれをフォームで利用する場合はJavaScriptのinnerHTMLとかinnerTEXTで取得して送信すればいいみたいです。まだ試してませんが…。

 

おまけ

どうせなのでブックマークレットにしておきましょう。

どこか適当なページをブックマークしてからそのリンクの「編集」を開き、URLに上記コードをコピペ、サイト名にはなにかわかり易い名前(簡易メモとか)をつけてブックマークバーとかにおいておけばいつでもメモれますね。

コピペが面倒ならこのリンクをクリックすると新しいタブが開くのでそこをブックマークすればOKです。

Jose Jesus Perez Aguinaga : One line browser notepad

TAGS