インタラクティブにWeb技術が学べるCodecademyに「HTML/CSS」のレッスンが追加されたようですよ。

↑ 自分でコードを打ちながら学んでいくことができます。

ただ、始まったばかりでちょいちょいバグがあるような・・・。もう少ししたら落ち着くのでは。ご興味がある方はどうぞ・・・。

» Web (HTML, CSS, JS) » HTML & CSS Overview | Codecademy

インタラクティブツールは作るのが大変ですな・・・と見ていて思ったり。

というわけで日本語＆動画でちゃちゃっと見たい方は是非ドットインストールをお試しあれｗ。

» 3分動画でマスターする初心者向けプログラミング学習サイト – ドットインストール

さてプログラミングのリハビリでIDEA*PADをツイッター対応させたサービスを作ってみました。まだ荒削りですが、一応動いているようなので見切り発車的に公開してみます（リリースしてからが本当の仕事だ、というポール・グレアムの言葉は偉大ですね！）。

名前は「weemo*（ウィーモ！）」です。今までの****padシリーズではないですが、語感がかわいいのでこれに決めちゃいました！（決まるまでの経緯は後述）

使い方は簡単で、ツイッターで認証したあとにメモを作って共有するだけです。共有する際には参加者のツイッターIDを追加した後に、URLを共有してください。

↑ こんな感じに編集していきます。シンプルにテキストだけね。

↑ 右側メニュー。こちらもきわめてシンプル。共有用のURL、@展開に加え、最新版を誰がいつ編集したか、共有している人がいつアクセスしたかがわかります。

↑ ホーム画面ではメモの一覧を見ることができます。

↑ ちなみに共有された人がアクセスするとこういう画面が出ます。

なお、基本的に性善説に基づいた設計になっており、参加者は誰もが追加・削除できるという鬼仕様ですｗ。迷ったのですが、そちらの方が便利かな、と思いますので仲良く使ってみてくださいね。

というわけでご利用は以下からどうぞ！

» weemo* – ツイッターユーザーのためのシンプルなメモ帳

■ weemoができるまで（裏話＆謝辞）

ここからは裏話。

weemo開発のきっかけは昨年末。なんとなく「ツイッター認証のサービス作りたいなぁ」と思い始めOAuthを勉強しつつ、ツイッターの認証レベルざっくりすぎだなぁ、と思ったりしながら、まぁ、IDEA*PADのツイッター版でもつくるか、ということで着手しました。

ちなみにそうなると先発のMeityと思いっきりかぶるなぁ、と苦笑しつつ、でも作者も知っているし、なんとか許してもらおうとざっくりと組み始めます。コードはIDEA*PADからほぼ流用し、さくらのVPSを借りて放置していたものをひっぱりだして、github.comにコードを出し入れしながら開発開始です。

ただこのときにドメイン名がまったく決まっていませんでした。「やはりここは…pad.jpかなぁ」と思いつついろいろなドメインを試したのですが、なんともしっくりこない。しかもサービスの特性上、URLが短い方がいいに決まっている（ツイッターで共有されることを考えると）。

そこで「いやー、まいったよね−」なんてことをチャット友達のstarmix（スタミ）に打ち明けると「ちょっと考えて差し上げよう、うん」ということで数日後「weemoってどう？we+memoでweemo。wをひっくり返すとmになるのもポイント高いよね！」とかデザイナーっぽいことをいうので、その場でドメイン取得。

そこからは「ドメイン決めたのは君だからやはりロゴは君が作るべきだろう」「ついでにFaviconも作ってよ」「デザイナーだからこのページの色合いについてフィードバックをくれたまえ」とリクエストを投げまくりでなんとか完成に至ることができました。ありがとうございます。

ちなみに感謝を込めて彼女のブログなんかも紹介しておきまする。お見知りおきを。

» スタミフィルタァ

しかし今回はじめてデザイナーさんと一緒に何かを作りましたが、ゆるやかなプレッシャーがかかっていいですね。「もう出来たのですか？」「いつ出来るのですか？」「リリースはまだですか？」とオンラインになるたびに聞かれるので「オンライン状態を隠す」というスキルが高まりました。本当にありがとうございます。

それからMeity作者のF.Ko-jiにも一応許可をもらいました。Meityの方がなにかと高機能なのでweemo*がいまいち・・・という方は是非そちらをご利用ください。

» Meity.jp (メイティ) – TwitterのIDやリストで公開先を指定するメッセージ作成サービス

最後になりますが、クローズドベータ版をテストしてくれた皆様、ありがとうございました。

というわけでもしかしたらバグなんかが潜んでいるかもしれませんが、ご興味がある方はいじってみてくださいな。しばらくしたら技術的な背景やらなんやらもまとめてみたいと思います。

» weemo* – ツイッターユーザーのためのシンプルなメモ帳

さてcheck*padですが、横幅を変更するためのユーザースタイルシートを作ってもらいました。Firefox限定ではありますが、もっと広く画面を使いたい！という方はいかがでしょうか。

↑ ほーら、こんなに！

作っていただいたPenpenさん、ありがとうございました！詳細＆ダウンロードは以下からどうぞ！

» check*pad の横幅を変更するユーザースタイルシートを更新しました – fs::sub – subダイアリーグループ

さてちと業務連絡ですよ。シンプルなメモツール『IDEA*PAD』のトップページをわかりやすくリニューアル＆サーバー移行しました。

↑ 今まで何のツールかわからんかったのでリニューアル。すっきり。

パスワードとURLだけで共有できるので会員登録不要です。みんなでよってたかって編集できるので呑み会やイベントの計画なんかに使われているようですね。編集履歴が全部残るし、ケータイからも見れるのでわりと便利じゃないですかね。

というわけでご利用はこちらからどうぞ。

» IDEA*PAD ～ あんまり大事じゃないデータのためのシンプルなメモ共有ツール ～

ちなみにリニューアルしてくれたのはthink-Lさんです。良い仕事します。フリーなので小回りも利きますな。モバイルサイトも得意なんでそっち系のお仕事あればお気軽に問い合わせてみてくださいな。

» think-L | PC・モバイルサイトのコーディング承ります

週末にcheck*padのサーバー移行をしようと思ったのですが、ちょっと技術的な問題が・・・。なんとか解決して近日中に再チャレンジしたいと思います。しばしお待ちを・・・。

check*padの速度が遅いので国内のサーバーに移管します。

今日か明日か明後日かの深夜に行います。2時間ぐらいつながらない時間があるかと思いますがご了承ください。なお、深夜1時～4時のどこかだと思います。

ご迷惑をおかけしますがどうぞ御理解ください・・・。

さてcheck*padですが、いろいろマイナーバージョンアップしました。以下、箇条書きにて。

• 共有リストに更新があったらお知らせ機能を復活。



↑ 更新があると十字が赤くなりますよ。

• 全データのダウンロードに加え、メール送付ができるように。



↑ ちょっと時間かかりますが、メールでも送付できます。

• チェックボックス連打で変なことになるのを修正。
• リストの並び替えをしているときにリストが左端に表示されちゃうのを修正。
• 最初にリストを保管したときに「保管リストへ」が表示されなかったのを修正。
• 「すべての項目が達成されました！」のメッセージを復活。
• リニューアル前に招待したけどまだ登録していない人に関して出るエラーを修正。
• メールで項目追加する際に、送信元アドレスに名前が含まれていてもOKなように修正。
• 公開中のリストをログイン中に閲覧できない、というエラーを修正。
• 他の人のリストをコピーしたときにリストの所有者が変わらないというエラーを修正。
• 他の人のリストを保管できてしまうというエラーを修正。
• 本番環境でエラー表示抑制処理（← ひどいミス）。

というわけでいろいろ便利になりましたので是非ご利用ください。

そしてiPhoneアプリ・・・難しすぎない？？？

» シンプルな目標管理ツール | check*pad.jp

これまた個人メモです。興味のない方はスルーの方向で・・・。check*padのデバッグではまった点もろもろですね。こういうのメモしておくとあとで便利なんで・・・。

• PHPのjson_encodeは引数がstringでもいける。エスケープしたいときに使える。
• docomoのguidはhiddenでPOSTしても無視される。GETで取得すべし。
• JSにHTMLを直接書いてもいいけど、閉じタグでscriptタグが終わってしまわないように注意が必要。

【誤】var s = '<span>hoge</span>';
【正】var s = '<span>hoge<'+'/span>';

• innerHTMLは要素の書き込みにはいいけど、読み込みで使うときは微妙。IEだとダブルクォーテーションが消えたり、inputタグのtype="text"が消えたりする。
• jQueryで要素を追加したあとにfocus()させようとするとIEがとろい。setTimeoutで微調整する必要あり。
• IEで使えるDOMインスペクタ、どれも微妙（Firebug LiteもIE8標準のやつも動的に書き換わるDOMを調査できない）。

全体的にIE爆発（ｒｙ

さて、そんなところですが、check*pad、もうちょっとだけマイナーリニューアルを今夜あたりに行います。評判が悪い「マウスオーバーでぴょこぴょこする」を直す予定です。

» シンプルな目標管理ツール | check*pad.jp

check*padのリニューアルに関していろいろあったのでメモしておきます。自分の技術力のなさを露呈するようなので悩みましたが・・・何事もノウハウのシェアということで・・・。

• 今回のリニューアルの狙いは、(1)コードをきれいにしてAPIとか作ってiPhoneアプリとか作りたい、(2)サーバーを移行してコスト減、の2つ。
• 開発期間はなんだかんだと2ヶ月ぐらいですかね・・・。CakePHPじゃなくて、オレオレフレームワークで作っています。
• ちなみに今まではさくらの専用サーバー。月額1万円近くかかっていたので無料ツールとしてはもうちょっとなんとかしたかったのです（専用サーバーの勉強には良かったけど）。
• それでもって移行先は海外のVPSで評判高そうなLinode（教えてくれたのは@jishiharaさん）。月額20ドル程度。円高パワーでぐっとコスト減、かと思ったらさくらのVPSとか出てきて涙目。しかしLinodeはダイナミックにリソースを増減させられるので負荷を見つつ運用するには良いかな、と。あといろいろ機能が豊富なのも魅力。こちらについては別エントリーで詳しく。
• リニューアル作業は土曜日の深夜1時から5時までと決めてサイト内のバナー＆このブログで告知・・・しかし仕事で使っている人もいたので全ユーザーにメールといった告知方法をとれば良かったと思っています。十分に告知できなくて申し訳ありません・・・。
• ちなみにメンテナンス画面も作って「メンテナンス中画面を出す正しい作法と.htaccessの書き方」どおりにやるつもりだったのですが、Apacheが古くてエラーがでるという結末に・・・しょうがないのでその場でPHPとか書いてメンテ画面を作りました。



↑ 遂に日の目を見なかったメンテ画面の画像・・・。

• 移行作業は手順をリスト化してあったのでスムーズに進んだのですが、移行してテストしてみたら細かいところでバグがあることが発覚（事前にも十分テストしたつもりでしたが・・・ありますよね・・・）。何度か手戻りが発生しつつもデータ＆プログラムの移行完了。ただデータ量が多かったのでやっぱり数時間かかりました。
• あとはDNSを切り替えて浸透を待つだけ・・・だったのですが、事前にTTLを0にしておくのを知らずに浸透まですごく時間がかかってしまうことに。「仕事で使っているので使えるようになる時間を正確に知りたい」というメールがたくさん・・・。ごめんなさい・・・。
• よくよく調べるとDNSの浸透時感は1日～最大3日。これではいけないと思い、知り合いのエンジニアに質問しまくり・・・。
• ドメインが変わらずの運用なのでリダイレクトも効かず、結局は旧サーバーにProxyを設定することでなんとか大丈夫に（thanx to @akiyan）。 ← イマココ

以上、まだ完全ではないですが（明日からが本番・・・）、なんとかリニューアル作業を終えました。もうしばらくは様子見が続くと思いますがまた何か学んだらシェアしたいと思います。

check*padに関する連絡です。

昨晩から今朝にかけてリニューアル作業＆サーバー移行を行い、現在正常に稼働していますが、お使いのプロバイダーによってはDNSの浸透に時間がかかる場合があります。もうしばらくお待ちいただけると助かります・・・。

なお、技術的に可能なら、お使いのPCのhostsファイルに以下の設定を加えていただければ新システムにアクセスできるはずです。緊急の場合はこちらもお試しください。

www.checkpad.jp 74.207.247.10

まだアクセス出来ない方にはご迷惑をおかけして大変申し訳ありません・・・。

追記：いろいろあって大丈夫なようになりました。詳しくは次のエントリーで。