スマートフォン用サイトを作るのに使ったネタ（WebFont、角丸ほか）

この前作ったDTPの勉強会ツイートライブ実況専用サイトは、結果的にHTML5時代の材料でスマートフォン用のアプリケーションサイトを作ることになったのでした。

僕がいろいろ作っているのは、誰かにもっといいものを作ってほしいからですので、今回作った時の経験を記録として書いておけば、誰か真似して、もしくはさらにいいものを作ってくれることもあろうかと思います。

① WebFont

タイトルバーに、とてもthinな書体を使いたかったので、WebSocketが使えるということはMozilla Firefox 7と限定されるということもあり、WebFontが使えるわけですので、使ってみました。

Google Web Fonts
http://www.google.com/webfonts

Google Web Fontsは、APIが用意されているので、CSSに1行書き加えるだけで、フォントが使えるようになります。

② タッチでトップ

iOSなどで採用されている、タイトルバーのところをタッチすれば、コンテンツのトップが表示される仕組みですが、jQueryなどを使えば、$('body').click(function(){scrollTo(0,2);});で実現できてしまいます。アニメーションするようにするとモアベター（というよりはマスト）です。

スクロール位置を(0,0)にしないのは、URL入力バーをを出さないようにする工夫です。たいていのサイトでは、scrollTo(0,1)と書いていますが、Android版Firefox 7では、それだとまだURL入力バーが見えてしまうので、あえて(0,2)の位置にしました。

③ WebSymbol Font

WebFontが使えるということで、機能ボタンのアイコンもフォントです。

Web Symbols typeface
http://www.justbenicestudio.com/studio/websymbols/

画面では○に＋とかなっているのはすべてフォントです。大きさも調整できるのがいいですね。

④ CSS3で角丸

角丸は今やCSSで簡単にできてしまいますよね。僕はいつもCSS3 PIEでCSSを生成してコピペしています。

CSS3 PIE: CSS3 decorations for IE
http://css3pie.com/

～～～

これらのほかにも細かいネタを使って、短時間でそれっぽいUIを作ることができたと思います。

このような感じで、DTPや印刷の人にぜひ役立つサイトや役立たないサイトを作ってもらえればと思っています。

2011.11.30 22:50 [DTP] | 固定リンク | コメント (0) | トラックバック (0) |

iPadに太鼓の達人を入れておくと（子供が）多い日も安心

昨日、近所の飲み屋行ったんです。飲み屋。
そしたらなんか子供がめちゃくちゃいっぱいでうるさいんです。
なんか親子連れとかもいるし。一家４人で忘年会か。おめでてーな。

ていうわけで、親どもは一生懸命飲むのに精が出て子供がほっぽり出しになっていたので、
お前らな、iPadで太鼓の達人やるからその席に落ち着けと。

ていうわけで子供たちは太鼓打ちに精を出すようになりました。

iPadで太鼓の達人やらせるには、事前に、アクセシビリティのズーム機能はOffにしておくことが必要ですね。太鼓の達人での連打がトリプルタッチに解釈されていきなり画面がズームします。

つうわけで、iPadに太鼓の達人入れとけば見ず知らずの子供をあやせるよ、ていうお話でしたとさ。

2011.11.29 22:50 [日記・コラム・つぶやき] | 固定リンク | コメント (0) | トラックバック (0) |

WEB+DB PRESS総集編Vol.1～60買った

技評から出ている「WEB+DB PRESS総集編Vol.1～60」を買ったよ。

森田創: WEB+DB PRESS 総集編 [Vol.1～60]

昔は本屋でWEB+DB PRESSを手にとって役立ちそうな記事があったら買ってたのだけれども、最近はあまり本屋に行くことも少なくなってきていたので、何が載っているか分かんない状態だったのですけれども、今ちょうどPerlでAnyEvent使っていろいろやっている関係で、過去にWEB+DB PRESSでAnyEventの特集があったらしいで、ということを知ったので買ってみたよ。

こうやって再録版が簡単に出せるってことは著者さんとの契約がそれがしやすいようになっているんだろうなーとか思いました。

2011.11.28 23:28 [Web] | 固定リンク | コメント (0) | トラックバック (0) |

AnyEvent::Twitter::Streamで自動再接続処理（whileループを使わない版）

AnyEvent::Twitter::Streamの再接続の件をずうっと考えていたのですが、当初参考にしていた、

hidekiy blog: [perl] AnyEvent::Twitter::Streamで自動再接続処理 [blog.hidekiy.com]

のとおりにすると、通常のAnyEventでの組み方の時はよさそうなのですが、Mojoliciousと同時に使用するなど、イベントループを共有する場合は、while(1){} のせいで、Mojoliciousのイベントループ開始までプログラムが進行できず、かといって、AnyEvent::Twitter::Streamの再接続の処理をMojoliciousに担当させるというのは難しそうなので、ここは、「Twitterのウォッチャー」と、「〔Twitteのウォッチャー〕のウォッチャー」の二つのウォッチャーを作り、お互いにウォッチャーの再生成をさせることで、結果的にAnyEvent::Twitter::Streamの再接続が実現できるようにしてみました。

#!/usr/bin/perl
 
use strict;
use warnings;
use AnyEvent::Twitter::Stream;
use Config::Pit;
use EV;
use utf8;
use YAML;
binmode STDOUT => ':utf8';
 
my $pit  = Config::Pit::get('twitter.com@CLCLCL');
my $keys = YAML::LoadFile  ('consumer_keys.yaml');
 
# AnyEvent リスナー設定
my $cv = AnyEvent->condvar();
 
my $listener_twitter; # グローバル：$listener_twitter,
                      # $listener_timer内からundefするため
my $listener_timer;   # グローバル：$listener_timer内から
                      # undefするため
my $set_twitter; # Twitterのウォッチャーを設定する
                 # サブルーチン入れる
my $set_timer;   # Timer  のウォッチャーを設定する
                 # サブルーチン入れる
 
# Twitterのウォッチャーを設定するサブルーチン
$set_twitter = sub {
  $listener_twitter = AnyEvent::Twitter::Stream->new(
    consumer_key    => $keys->{consumer_key},
    consumer_secret => $keys->{consumer_key_secret},
    token           => $pit ->{access_token},
    token_secret    => $pit ->{access_token_secret},
    method => 'filter',
    track  => 'dtpstudy05',
    on_tweet => sub {
      my $tweet = shift;
      print "$tweet->{user}{screen_name}: $tweet->{text}\n";
    },  
    on_error => sub { # 何らかのエラー発生（再接続をしたい）
      my $error = shift;
      warn "ERROR: $error";
      undef $listener_twitter; # Twitterのウォッチャー消す
      $set_timer->(5); # 〔Twitterのウォッチャー〕のウォッチャー再設定
    },
    on_eof => sub {
      # どういう時にEOFが来るんだろう？
    },
  );
};
 
# 〔Twitterのウォッチャー〕のウォッチャーを
# 設定するサブルーチン。引数の分だけ待つ
$set_timer = sub {
  my $after = shift || 0;
  $listener_timer = AnyEvent->timer(
     after    => $after,
     cb => sub {
       unless ( $listener_twitter ) {
         print "(re)connecting\n";
         undef $listener_timer;
         $set_twitter->();
       }
     },
  );
};
 
# 〔Twitterのウォッチャー〕のウォッチャーを起動
$set_timer->();
 
# イベントループに仕事をしてもらい、
# プログラムの進行をここでせき止めます
#（$cv->sendがないので実質無限ループ）
$cv->recv;
 
exit;
 
__END__

Twitterのウオッチャーがエラーになった時、自分自身のウォッチャーを無効にしたうえで、〔Twitterのウォッチャー〕のウォッチャーを起動します。

〔Twitterのウォッチャー〕のウォッチャーは、Twitterのウォッチャーが無効でないか確認しており、もし、無効であれば、Twitterのウォッチャーを起動します。

とりあえず、これを組み込んで、長時間動かして接続が切れないかどうか観察中です。

2011.11.27 18:25 [Perl] | 固定リンク | コメント (0) | トラックバック (0) |

Mojolicious 2のWebSocketではon_finish(sub{});がないので、on(frame=>sub{});で対応してみた

今動かしているMojolicious::LiteでWebSocketでクライアントに表示するやつなんですけれども、Mojoliciousのバージョン1/2の両用で動くようにしていたのですが、本番のMojolicious 2の環境では、WebSocketクローズのイベントが取得できない状態になっていました。よって、こんな感じにしてみました。

  # WebSocketコネクション切断時処理（共通）
  my $on_finish = sub {
    # ログに切断記録
    app->log->debug('Client disconnected');
    # $clientsからWebSocketクライアントを削除
    delete $clients->{$id};
  };
  
  # WebSocketイベント設定
  if ( $Mojolicious::VERSION < qv("v2.0") ) {
    # Mojolicious 1.xの時の処理
    $self->on_message();
    $self->on_finish( $on_finish );
  }
  else {
    # Mojolicious 2.xの時の処理
    $self->on(
      message => sub {},
    );
    $self->on(
      frame => sub {
        my ($ws, $frame) = @_;
        if ( $frame->[1] == 8 ) { # opcode=8: close
          $on_finish->();
        }
      },
    );
  }

これを見ると、どうも frame-opcode = 9（ping）、frame-opcode=10（pong）も$ws->on(frame=>sub{}); の中で対応しなくちゃいけないのかなーとか思っていますが、調べ中……

ここを参考にした：
WebSocket(hybi-07)でechoサーバを作ってみた - いろいろな何か [d.hatena.ne.jp]

2011.11.26 15:21 [Perl] | 固定リンク | コメント (0) | トラックバック (0) |

Android版Firefox 8のbutton要素は、background-image: none; でグラデーションが消える

昨日公開したサイトでは、公開直前まで昨日ボタンをspan要素で作っていたのですが、span要素でボタン作るとなんだかヤバそうな感じの書き込みをどっかで見たのですぐに、button要素に書き換えたのですけれども、button要素をspan要素のように見せなくてはならないわけです。

で、CSSで、border: 0px; background-color: transparent; を指定すると、ボタンのデフォルトスタイルの灰色の部分が消える、というものなのですけれども、

Android版Firefox 8だと、まだグラデーション状の色がbutton要素に付いているのです。

Android版Firefox 8だと、更に、background-image: none; を指定しないといかんのです。ボタンのあの立体感を出すグラデ、画像だったのかよ！とか、ビックリしましたとさ。

HTML5アプリって難しいですね……

2011.11.25 22:58 [Web] | 固定リンク | コメント (0) | トラックバック (0) |

DTPの勉強会第5回のツイートをリアルタイム表示できるウェブサイトを用意した

2011年11月26日のDTPの勉強会第5回に参加できないので、その勉強会に参加した人のツイートを表示できるウェブサイトを作りました。

ネーミング決めてないのと、勉強会終わってから1週間ぐらいでサブドメイン消すつもりなので、URLでどうぞ。

http://20111126.dtpwiki.jp/

Dtpstudyrealtime2
▲Windows版Google Chrome 15での表示

▲Android版Mozilla Firefox 8での表示

何をするサイトなの？

DTPの勉強会#5が開催される前後1週間ぐらいで、Twitterにて「dtpstudy」「dtpstudy05」を含む発言をした日本語設定のユーザーのツイートを記録します。
サイトにつなぐと、WebSocketをサポートしている特定のブラウザであれば、リアルタイムに発言が表示されます（従来のウェブサイトだとちょっと難しかったところです）。

どういう仕組みなの？

Amazonのサーバを借りて、そこでTwitterの発言を監視し、記録するとともにリアルタイムに配信するサーバと、記録された発言を配信するするサーバが動いています。
Twitterの発言を監視するものは、「dtpstudy」「dtpstudy05」を含むツイートがあると、DBに記録すると同時に、その時にサイトに接続されているブラウザにツイート内容を配信します。
閲覧ユーザーのブラウザには、サーバーに記録されたツイートと、リアルタイムに発言されたツイートが表示されます。
閲覧ユーザーのTwitterアカウント情報は一切使用しません（開発者のアカウント情報で取得して、ほかの方に見せているという状態です）。
閲覧ユーザーの情報は、Google Analyticsで取得できる情報以上のものは取得いたしません。

動作確認ブラウザ

Mozilla Firefox 7以上
Google Chrome 14以上

警告を無視すれば、非対応ブラウザでも過去ログ表示だけはできるんじゃないかな……？

想定される質問と回答

このサイトからツイートできないの？: 閲覧者のTwitterアカウント情報を使わない設計なので……
iPhoneに対応しないの？: 申し訳ありません。Safariに対応できませんでした。
なんか裏技ないの？: キーボードショートカットがいくつかあります。
主催者にコンタクトとった？: 連絡済みですー
クソ使いにくい。: Twitterでフィードバック求めていたときに言ってくだされば……
なんで期間限定なの？: Amazon EC2はタイムフィー制なので、いつまでも稼働させておくと僕のお財布が軽くなるからです。

最近荷物の配達とか箱詰めとか工員的なのが多かったので、久々にHTML5とかWebSocketとかWebFontとかMojoliciousとかAnyEventとかいまどきの材料で作ってみましたが、残念ながらエラー発生時のリカバリー部分（特にTwitter監視部の接続が切れたときの再接続部分）が未実装でございます。つまり、僕が当日監視しないとツイート拾い漏れが発生するシステムになっているのですね。

大丈夫かよこのシステム。

あと、接続数のテストもやっていないです。我が家の端末5台までは普通につなげられていたから、そこそこ何とかなるんじゃねーの、という感じもしていますが。

てな感じです。当日WebSocket接続が切れたら、僕がサーバ接続切れたのを発見して手動で接続しなおしている感じです。

それでも良ければ、当日使ってみてくださいね。

2011.11.24 22:47 [DTP] | 固定リンク | コメント (0) | トラックバック (0) |

「えーマジ学参!?」「学参が許されるのは小学生までだよねー」

　　　　　　　　し!　　　　　_　　-──　‐- 　　､　 , -─-､　-‐─_ﾉ
　　小学　　　 /／￣＞ ´ ￣　　　￣　　｀ヽ　 Y　 ,　 ´　　　　　）　学　え
　　学参　　　 L_　／　　　　　　　　　　　　　　／　　　　　　　ヽ　参　 |
　　生が　　　　/ '　　　　　　　　　　　　　　　　'　　　　　　　　　　 i　 !?　マ
　　ま許　　　 /　　　　　　　　　　　　　　　　 /　　　　　　　　　　く　　　ジ
　　でさ　　　 l　　　　　　　　　　 ,ｨ/!　　　　/　　　/l/!,l　　　／厶,
　　だれ　　 i 　 ,.lrH‐|'|　　　　 /‐!-Lﾊ_　　l　　　 /-!'|/l 　／｀'ﾒ､_iヽ
　　よる　　　l　 | |_|_|_|/|　　　 / /__!__ |/!ﾄi　　　i/-- ､ﾚ!/ 　 /　,-- ﾚ､⌒Y⌒ヽ
　　ねの　　_ゝ|/'/⌒ヽヽﾄ､|/　'/￣｀ヾ、ヽﾄ､Ｎ'/⌒ヾ　　　　　 ,ｲ￣｀ヾ,ﾉ!
　　 l　は　　「　　l ′ 「1　　　　　　 /てヽ′|　|　|　「L!　　　　　' i'ひ}　　　ﾘ
　　　　　　　ヽ　 | ヽ__Ｕ,　　　　　､ヽシノﾉ!　!　|ヽ_､ｿ,　　　　　ヾシ _ノ　_ﾉ
-┐　　　　,√　　 !　　　　　　　　　　￣　　ﾘ l 　 !　￣　　　　　　　￣　　７/
　ﾚ'⌒ヽ/　!　　　 |　　　〈　　　　　　　_人__人ﾉ_　 i　　く　　　　　　　　　 //!
人_,､ノL_,iノ!　　/! ヽ　　 r─‐- ､　　「　　　　　Ｌ_ヽ　　 r─‐- ､　　 u　　ノ/
　　　　　　/　 /　lﾄ､＼　ヽ, -‐┤　ﾉ　　キ　　　了＼　ヽ, -‐┤　　　　　/／
ハ　キ　　{　 /　　　ヽ,ﾄ､ヽ/!｀ｈﾉ　　）　　モ　　　　|/!　「ヽ, `ｰ／）　　 _　‐'
ハ　ャ　　ヽ/　　 r-､‐'　// / |-‐ く　　　 |　　　　＞ / / ｀'／／-‐､　　　　／
ハ　ハ　　　＞／＼＼// / /ヽ_　 !　　イ　　　（　 / / ／／　　/　`ｧ-‐ '
ハ　ハ　　　/　/!　　ヽ　　　レ'/　ﾉ　　　　　　　　＞　 ' ∠ 　-‐　￣ノヽ　　　/
　　　　　　 {　 i　l　　　 !　　　　/　フ　　　　　　　/　　　　　-‐　/￣/〉〈＼ /!

ていうのを広めれば学参書体使うデザイナーも恥ずかしくなって改めてくれるんじゃないかな。

よくわからんがもう広まっていたりするのかな。

2011.11.23 10:24 [フォント] | 固定リンク | コメント (0) | トラックバック (0) |

Linuxのext3ファイルシステムは1ディレクトリ内に31998エントリまでしか格納できないのをあらためて認識する

今日やらかしてしまったのですが、とある診断サービスを運営していて、ファイルをアップロードする必要があり、アップロードの進捗をブラウザに伝える必要があったものでアップロードファイルのテンポラリファイルを/tmpから別のディレクトリに変更している状況で、更にテンポラリファイルを消していない状況だったのですが、この度めでたくテンポラリファイルが31998個になり、アップロードに失敗するようになっていました。

ext3ファイルシステムは、そんなに古くはないファイルシステムなのに、1ディレクトリ内のエントリが32000エントリ（内、.と..で2つ消費するので、意味のあるエントリは31998エントリ）になると、それ以上ファイルやディレクトリが作れなくなるのでした。

早くext4ファイルシステムが使いたーい！（テンポラリ消せよ）

2011.11.22 23:33 [Linux] | 固定リンク | コメント (0) | トラックバック (0) |