WEB上で使えるメモ帳のオンラインメモさん。
この子の使い方やFirefoxを使って文字数カウントをつけるカスタムの説明してきます。
それにしてもこの名前のダサさときたら…

オンラインメモ

登録なしで使える簡単なメモ帳で軽いしシンプルだし素敵。
パッと開いてパッとメモできるし、メモの保存までできて仕事の時に一役買ってます。
Facebookのアカウントでログインすれば色んなデバイスで保存したメモを共有できるみたい。
オンラインメモはこちらから。

オンラインメモの使い方

もう本当にメモを書くだけ。
タイトルは保存する時に入れて保存を押せばOK。
保存したメモは保存・削除などのボタンの下にタイトルが一覧になって表示されます。

そのタイトルをクリックすればテキストエリアにバチッと保存したメモが現れます。
保存したメモを表示すると、テキストエリアに書いてた保存前のメモは消えちゃうから注意ね。
それとタイトルを書かずに保存した場合もメモが消えて無くなるからこれも注意。

オンラインメモのクラウド化

Facebookのアカウントを持っていればPCとスマホでメモを共有することもできます。
が、なんだか使い勝手はイマイチなのであんまり使ってません。
元々保存していたメモは引き継がれないし、なんにせよログアウトができない素敵仕様。

未ログイン時

ログイン時

でもソース上ではログアウトがちゃんとあるみたいで、PCではFirebugなどのHTML,CSSをイジれる機能を使って無理矢理ログアウトすることは可能です。
下の画像を参考にdiv#myModalのdiaplay:noneと.fadeのopacty:0を非表示にすれば、オンラインメモの上部にログアウトのボタンが現れるのでそれをクリックすればログアウトできます。

スマホは……どうすればいいのやら。

文字数カウント設置

オンラインメモに唯一足りないと思う機能が入力文字数のカウント。
他のメモ帳と併用するのが面倒だったのでFirefoxのアドオンを使って設置しました。
ちなみにスペースと半角スペースはカウントしないようにしてます。
見た目はこんな感じ。

オンラインメモに文字数カウントの設置の仕方を説明していくけど、jQueryを使って書いてるんでわからない人は自己責任で。
コピペで大丈夫だけど一歩間違えると動きおかしくなったりするので。

必要な物

文字数カウントをつけるのに必要なのは以下の3つね。

• ブラウザ
  Firefox
• アドオン
  Greasemonkey
• アドオン
  Stylish

やり方としてはGreasemonkeyでユーザースクリプト(jQuery)を書いて文字数カウントの機能をつけて、StylishでCSSを書いて見た目を調整するって感じ。
ブラウザをFirefoxにしてるけどGoogleChoromeでもユーザースクリプトが書ける拡張機能があればそれでもOKね。
Chromeは使わないから詳しい説明はごめんなさいで。

ダウンロード

Firefoxを持っていなければダウンロードしてから、FirefoxでGreasemonkeyとStylishを上記リンクからダウンロードして再起動するだけ。
あら簡単。

Greasemonkeyの設定

まずはGreasemonkeyを有効にして、ユーザースクリプトを新規作成からユーザースクリプト(jQuery)を書いていきます。
そんでもってこれが新規作成する時の設定画面ね。

• 名前
  わかればよし！僕はURLにしてます。
• 名前空間
  これは使わないので適当に入力しとけばOKです。
• 説明
  どんなjQueryを書いてるか説明が必要なら書きましょう。
• 実行するページ
  jQueryを実行するページなので「http://onlinememo.net/」のみでOK。
• 実行しないページ
  「http://onlinememo.net/」のみでしか使わないので未記入でOK。

これでOKを押すといよいよJavaScriptを書く画面が表示されるので下の画像のようにjQueryを書いて保存しましょう。

jQueryの解説

下の一文でオンラインメモのHTML上に文字数カウントの本体となるdivを設置します。
空白だと寂しいので「0」を記入しておきます。

次でテキストエリアに入力があったことを判定します。
ちなみにkeyupはキーボードのキーが押されてから離れた時にイベントが呼び出されるので、日本語入力がOFFの場合はリアルタイムにカウントが取れます。

その次に$(this).val()でテキストエリアの内容をみて、
.replace(/\s+/g,”)でスペースと半角スペースを削除して、
.lengthで残った文字数を取得します。
これを変数で書いてあげます。

これで上で取得した文字数を最初に作ったdivに入れて文字数カウントの出来上がりです。
ただしこれだと見た目がちんちくりんなのでStylishでCSSを書いてあげましょう。

ちなみにCSSを書かないとこんな感じ。

Stylish

Stylishの「スタイルを書く」からonlinememo.net/専用を選択してCSSを書きます。
白紙のスタイルや書き方を間違えると全ページで有効になってしまうので注意ね。

新規作成画面に行くと下記が書かれた状態で開きます。

なので@-moz-document domain(“onlinememo.net”) {}の{と}の間に下記のCSSを書いてあげます。
ちなみに@-moz-document domain(“onlinememo.net”) {}は{}の中のCSSはonlinememo.netのドメインにだけ適用するって意味ね。
{}の外に書くと全ページで有効になって色んなサイトの表示がおかしくなることがあるので必ず{}の中に書くこと！

これで保存して完了です。
CSSがわかる人はギャンギャン変更しちゃってください。
このCSSだと見た目はこんな感じね。

上でも言ったけど書き方間違えたりすると保存したメモが見られなくなったりするので注意ね。
オンラインメモだけで不具合起こるならまだいいけど、他のサイトにも影響出ちゃうこともあるのでjQueryやCSSがわからない人は自己責任で頑張ってちょ。
わからないことがあったらコメントで聞いてくだせぇ。
あとGreasemonkey側でjQueryは読み込まなくて大丈夫です。
jQueryを読み込むと逆に不具合起きたりしたんで気をつけてね。