神戸のウェブ勉強会 ウェブテコのご縁で、北野坂にある栄ゐ田(えいた)というお店のウェブサイトの作成をお手伝いさせていただきました。
北野坂 栄ゐ田
いただいたイメージを元にHTMLとCSSを起こして、JavaScriptによるスクロールや縦書きの実現などのWEB開発を担当させていただきました。
ご覧の通り、お品書きをイメージした横長のデザインになっています。WEBの世界はテキストが左から右、上から下へ流れることを前提にしているため、右から左に移動するサイトを作るのはかなり大変でしたが、最終的にXHTML 1.0 StrictなHTMLに落とし込むことができました。
＃オチはありません。
サーバの移行を検討しています。
今使っているのが、さくらの専用サーバ。月額7800円で、完全に一台貸していただけるサービスです。
スペックも使い勝手もいいので満足しているのですけど、先日の悲劇をかんがえると、
やはり開発用と本番運用のサービスは分けておきたいな、と。
今よりサーバ代が高くなるのは経営的にナシですが、最近だと、仮想化を利用して、root権限付きでも安価なサービスが増えて来つつあります。うまく使ったら二台借りても今より安くなるかも。
試してみたのはこの二つ。
Linode.com – Xen VPS Hosting
にちゃんねるとかで評判の、自由度の高いVPSサービスです。月額$20なので、一台借りて試してみました。
WEBからの管理画面がすごくて、サーバの再起動はもちろん、(ブラウザ上で)コンソールに接続したりすることもできます。
これはすごい。サーバのリブートを人力でやる必要あるのかなぁ?と思っていたのですが、ここまでできるとは。
でもね…
あきらかに応答速度が遅いのです。WEBはそうでもないのですけど、SSHでつないだ時の応答がもっさり。
ping打ってみたら、国内のサーバの3倍くらいかかっているから、そりゃあ遅いですよね。
絶対ダメかというとダメでもないのですが、この辺が遅いと、あきらかに開発時のモチベーションに響いてくるので、これはいったんパスです。
KDDI子会社の KDDI Web CommunicationsさんがやっているVPSサービスです。国内の会社でありながら、一年契約すると1890円/月！
テストサーバーを用意していただけたので使ってみました。
たぶんこのサービスを調査したほとんどの人が気にしているこのエントリですが。
VPS環境で、メモリ不足でgemが使えない? (Segmentation fault) Kawa.netブログ（川崎有亮）/ウェブリブログ
その後、設定の改善が行われたそうで。
メモリ設定の改善について – VPSスケーラブルプラン 開発者ブログ
実際、ボクがやった範囲では、普通にgemをつかってrailsをインストールして、webrickサーバにアクセスすることができました。
そういうわけで、メモリに関しては、言われているほどギリギリではないかなぁ、という印象。たぶん最近の改善が利いているのでしょう。
そういう改善をしていただけるサービスなら前途有望だし、いっそ乗り換えちゃおうか、と考えたのですが。
メモリ使い切った時にスワップせずに落ちるというのは、やっぱり大きな問題で。そのことを気にしながらサービスを全部移転させるとなると、相当の(時間的精神的な)コストがかかります。
うう～ん、と悩んだ末に、当分棚上げすることに決めました。
さくらインターネットさんで同様のサービスはじめていただけたら、気持ち的にはずいぶん乗り換えやすくなるのですけど。内部ではきっと検討しているだろうと思うので、楽しみにお待ちしております。
今ちょっと変わったサイトを開発中です。
開発中に「1280×1024のブラウザで見ると様子がおかしい」というレポートをいただいて。
そういえばあまりそういうテストをしていなかったな、と思って、ブラウザのサイズを自在に変える仕組みというのを作ってみました。
先日webtekoでAmazonEC2についてお話ししてきました。
webteko6:実践AmazonS3&EC2
そのときに、
というような話がありました。そのときは「まあそうだよねぇ」ってうなずいていたのですけど。
今日偶然、こんな広告を見つけました。
所有から利用へシフト、技術者の運用負荷とコスト削減を両立させるさくらインターネットの専用ホスティングサービス
「所有から利用へシフト」というと、それはまさにAmazonEC2のキーワードです。
よく考えてみたら、さくらインターネットさんのレンタルサーバだって、データを丸ごと預けてますよね？ここから流出する可能性だって、絶対にないとは言えない。
なのになぜか、さくらインターネットのサーバを借りてそこにお客さんのWEBサイトをのせているWEB制作会社ってたくさんありますよね。
さくらインターネットさんには大変お世話になっておりますし、なんのウラミもないのですけど、さくらならよくてAmazonだと駄目というのは筋が通らんよなぁ、と思いました。
iptablesをリスタートしたらsshが切られる現象が起きまして。
最初は、テーブルの書き換え方がまずいのかな、と思ってはてなで聞いてみたりしていたのですが。
調べた末に、iptablesを終了した際にKernelPanic起こしていたことが分りました。
解決策については、おれ最前線ねっと – Kernel panicで書いていただいているとおり、Kernelを新しくするか、古くすればOKです。
問題なのは、このサーバは遠隔地にあるということで。
カーネルをアップデートしたら再起動しないといけないですけど、普通にやると終了時にKernelPanicを起こして、二度と上がってきません。
メールとか電話で再起動を依頼できるのですけど、必要以上に頼みたくないですし。
そんなわけで、Bug 456664の状況下で、KernelPanicせずにリブートを成功させる方法を見つけたのでメモです。
これで、iptablesの終了時にモジュールのアンロードをしなくなるので、KernelPanicせずにリブートさせることが出来ます。とりあえずこれで一回リブートしてkernelが変われば、あとは設定を元に戻してもiptablesをrestartさせることが出来るようになります。やれやれ。
#今回の調査のために10回くらい依頼したから、今さら一回くらい一緒なんですけどね。
ウェブテコ第6回に行ってきました。テーマがインフラということで、自分は、ちょっと使ったことのあるAmazonEC2&S3についてお話しさせていただきました。
AmazonS3&EC2に関しては、すでに参考資料にあげたような優秀な日本語資料があるのですが、今回は、AWS Management Consoleを使って、ほぼ全部GUIでやってみました。
実際に使おうと思ったら、自動化のためにコマンドラインツールも必要になるとは思うのですが、とりあえず使い始めるのにJava入れなくてもいいのはなかなか便利だなぁ、と思いました。
ものすごい今さらですけど、いいめもおこづかい帳のデータベースを、sqlite2からsqlite3に移行させました。
ずっとやりたかったことなのですが、動いているシステムはさわるなの方針があるし、データベースの更新となるとどこに影響が出るか分ったもんじゃないので、そう簡単には移行できなくて今までひっぱっていたのです。
たしか、作った当時、windowsでRubyからアクセスできるsqlite3ライブラリが見あたらなかったのです。今考えると、railsで動いているんだから、動かないこともなかったと思うのですけど。
当時は気軽にネットワークアクセスできない事情があったので、ファイルベースでWindowsで動く環境となるとsqlite2、という状態でした。
sqlite2では性能上の限界に達したせいです。
sqlite2はデータを非圧縮で格納しているらしく、データ量が増えるとファイルサイズが線形に増えていきます。
で、一定のサイズを超えると、たまにinsertに100秒くらいかかるようになって、実用的に使えなくなる現象が発生していました。
どのくらいが限界かは環境にもよるみたいですけど、うちの場合、データベースのファイルサイズが49MBを超えるとこの現象が発生し始めて、おこづかい帳が応答しませんでした、ごめんなさい、とエントリーを書く羽目に陥っていました。
定期的にスパムメールを(手作業で！)削除したり、一年以上使っていない方のデータを削除させていただいたりして対処していたのですが、いつまでもそんなことやってられないので、大規模改修に着手した次第です。
ちなみに、sqlite2から３に移行するに当って実験してみたグラフ。10000bytesくらいのテキストを繰り返し書き込んで、データ量とアクセス時間がどうなるか測定してみたものです。
左軸がファイルサイズ、右軸がアクセス時間。横軸は書き込んだ件数。
縦軸に貼り付いているのがsqlite2のファイルサイズで、横軸に貼り付いているのがsqlite3のファイルサイズ。
赤いのがsqlite2での応答時間で、青いのがsqlite3でのアクセス時間です。
＃ええ。これが異常に重い処理の正体です。
生のデータをつっこんで動かしてみないと何が起こるかなんて分ったもんじゃないので、新バージョンのテストは、生のおこづかい帳システムの裏で一緒に動かしてテストしました。
railsみたいにデバッグモードを作って、デバッグモードの時はメールを外部に送信しないようにします。
本番用はm＠ememo.jp、テスト用がtest＠ememo.jpで動いているので、/etc/aliasesにこんなふうに書くと、ユーザーさんのメールを、本番システムとテスト用システムで、両方で見ることが出来ます。
m:|"/var/mailapp/app.rb", test＠ememo.jp ＃実際の＠は半角です。
この状態で3日くらい動かして、ログを眺めて挙動の違いを確認しました。
実際やってみると、いいかげんなSQLのせいでデータの順番が異なってしまっている現象がみつかって、テストして正解だったな、と思いました。
この仕組みは普段開発する上でもとっても便利なので、早く作っておけばよかったです。
Google英語検索フォームは、英語で検索したかったら毎回mogya.comを見にきて検索しないといけないので、営業的には大変おいしいツールなのですが、そんなめんどくさいことをする人はいないだろうと思います。
普通にブラウザから検索できるように、お気に入り(ブックマークレット)を作ってみました。
Google英語
お気に入りに追加(IE以外のブラウザなら、ブックマークバーにドロップ)しておいてつかいます。
クリックすると検索キーワードを聞いてくるので、適当に入力してOKを押すと、その単語をGoogle英語検索してくれます。
WEBサイトを見ているときに、文字列を選択して「Google英語」をクリックすると、そのキーワードでGoogle英語検索を行います。
参考:
ブックマークレットというのがあって、
ブラウザのブックマーク(お気に入り)に登録しておくと、色々便利な機能を使うことが出来ます。
特に多いのが、選択した文字列をWikipedia/英和辞典/和英辞典などで検索するというもの。ところが、インターネットエクスプローラー用です、FireFox用です、と分けてあったり、そもそもFireFoxでしか動かない物が多かったりするのですよね。
Google英語検索ブックマークレットは、インターネットエクスプローラーと、FireFoxと、ChromeとSafariで動作確認してあります。あ。Operaも。
ということで、インターネットエクスプローラーと、FireFoxと、ChromeとSafari(Operaも)で動く、選択した文字列に対して～するブックマークレットを作る方法まとめです。
「document.selection.createRange().text」。IE以外では全く動かない。
window.getSelection。document.getSelectionだと、Chromeやsafariで動かない。
window.getSelectionでうごく。ただし、to_stringが微妙らしく、そのまま文字列として扱うことが出来ないので、「window.getSelection()+””」としておくと文字列として取得することが出来る。これは、FireFoxやOperaでも動作する。
if(navigator.appName==”Microsoft Internet Explorer”) がまっとうだけど、長いのでdocument.allが定義されているかどうかで代用。
「var q=(document.all)?document.selection.createRange().text:(window.getSelection()+”);」
「if(!q){void(q=prompt(‘keyword:’,”))}; 」としておくと、文字列を選択していない時は入力を促すことが出来て親切。
URLを移動させる場合、window.location.hrefにURLを入れる人が多いけれど、これもChromeで動かない。location.hrefなら共通で動く。
動作確認環境は以下の通り。
ブックマークレットを作る時は、参考にしていただけると嬉しいです。
tomoyaさんのところで、Google英語検索いいよ！という話が出ているのです。
Googleで検索するときは .com と .co.jp を使い分けよう。 – 日々、とんは語る。
僕はいつごろからか、Google で調べるときは、.co.jp と .com を使い分ける様になったのですが、これが非常に便利です。
.com で検索すると、メインが英語圏になり、英語圏の情報が上位にやってくるようになります。 .co.jp だと、メインが日本語な上、日本語のページを検索というオプションしかなくて、英語圏だけを調べるというのが不可能なのです。
google.comって、google.co.jpにリダイレクトされません？
http://www.google.com
iGoogleを使っているせいなのかなぁ?
で、普通に検索するフォームを用意してみました。
英語優先で検索
日本語優先で検索
フォームの需要があるのかどうか知りたいので公開してみます。
special thanks:
» googleは英語を知らない – 葉っぱ日記
追記：Google英語検索ブックマークレットもつくりました。毎回ここに検索しに来なくていいのでこっちのほうが便利かも。