作成者別アーカイブ: effy

effy について

管理人@ギークハウス武蔵小杉/未来のネットを創る仕事@某社研究所/最近の興味:Pomodoro technique, OpenFlow, Objective-C, Social Network, Free Agent, Share, Innovation

ブラウザのホーム画面に現在時刻を表示

lifehacker.jpの記事に「ブラウザのホーム画面を時計にすると、いろいろ捗る : ライフハッカー[日本版]」というのがあったのでやってみた。これ、すごくはかどるし、なんかキレイで良い!

けど、Flashだから遅いし、そもそもネット環境が無い喫茶店とかで使うことができないという問題がある。

そんなわけで、時間を表示するJavaScriptを書いたHTMLをローカルに置き、それをホーム画面にしようかと。JavaScriptなんてほとんど書かないから文法あってるのか分からないけど、こんな感じ。

<html>
<head>
<script type="text/javascript">
  function itos(i){
    return ('0'+i).slice(-2);
  }
  function showtime(){
    dd = new Date();
    document.getElementById('clock_area').innerHTML =
      itos(dd.getHours()) + ':' +
      itos(dd.getMinutes()) + ':' +
      itos(dd.getSeconds()) setTimeout('showtime()', 1000);
  }
  </script>
</head>
<body onLoad="showtime();">
  <div id="clock_area" style="text-align:center;font:120pt sans-serif" />
</body>
</html>

本当は、bookmarkletにしてローカルファイルを置かなくても出来るようにしようと思ったんだけど、OSXのsafariではbookmarkletをホームページにはできなかった。残念。

2011年8月8日(月)

  • 最近、集中してプログラミングが出来て嬉しい
  • ギー杉の冷蔵庫が、プリキュアによって占領されつつある
  • どんどんいけ
  • ギー杉にお客様ご来訪。コロナビール振舞われる

2011年8月7日(日)

  • ものすごい雷。西武池袋線は落雷による停電のため運転ができなくなるなど。かなり近いところに何度も落ちてて怖かった。
  • 自宅には、もう使わなくなったビデオデッキが2台、パソコンが3台、その他細かいものがいろいろある。売り払いたいけれど面倒くさくてずっと置きっぱなし。どうしよう。とりあえず使わなくなった無線LANルータだけAmazonに中古品として出品してみる。

WordPressを色々いじる

  • 新しく追加されたTwentyElevenというテーマを使ってみようと思ったけれど、投稿ページにサイドバーを表示するのが面倒くさい。コードを書き換えすぎるのは嫌なので、昔のTwentyTenを使い続けよう。
  • ちょっとWordPressをいじったついでに、画像の周りに枠をつけるCSSを追加した。ちょっと見栄えが良くなった。
  • さらに、zenbackも追加してみた。どのぐらい待つと関連記事が出てくるようになるんだろう?

個人名刺を作る

  • 長い間、個人名刺を作っていなかったので、思い切って作った。最近はネットのおかげで名前でなく識別子を渡したほうが逆に便利なので、あえて名前を書かない名刺にしてみた。
  • 右上のデザインが気に入ったので、とりあえずこれを何枚か刷った。

2011年8月6日(土)

失敗から学ぶスタートアップのイメージ作り

  • http://blog.btrax.com/jp/2011/08/04/failed-startups/
  • これはいい。勉強になる。「はじめからこんな人気は予測していなかった。」って言ってみたい。
  • 日本もどんどんたくさんサービスが出てきたらいいのになぁ。

場を作っていく人と、利用していく人

  • 何らかの「場」を作るときに、一緒につくりあげてきた人たちと、あとから乗っかってくる人との間にはものすごい断絶があるなぁと思う。
  • なにか新しいプロジェクトを作っていくときは特にそう。具体的に社内SNSやギークハウスでそんなことを経験してきている。
  • 場を作る人は、夢を持って「こうして行くんだ」「良い場をつくっていくんだ」「みんな楽しくやっていくんだ」と、それこそその場を作るために泥のようになって頑張る。
  • けれど、後からその場に乗っかってくる人は、それがあることが当たり前だと思ってしまう。その大変さが分からない。それは、分かろうとしていないというわけではなく、分かろうとしても分からないことであって、体験しなければその大変さやワクワク感は理解できないものだと思う。だから、誰が悪いというわけではない。
  • そんなことを考えていたら、世界的に恵まれた日本という国にいて、どこでも安全な美味しいご飯が食べられて、どこでもネットに繋がることは、当たり前のように思えてしまうけれど、これは当たり前じゃないし、今の日本を創り上げてきた人たちが経験してきたことは理解することは僕には難しいのだろうなぁと、なんとなーく思っていた。
  • そのうち、東北の復興のために現地入りした人とそうでない人とかの間にも、大きな理解や思考の差ができてくるのだろうなぁ。一緒に場を作っていける人を増やしていくには、どうしたらいいのだろう?←ビジネスチャンス

第6回 小平グリーンロード 灯りまつり

  • 毎年行ってる地元のお祭
  • 2011/08/06a.jpg 2011/08/06b.jpg 2011/08/06c.jpg 2011/08/06d.jpg 2011/08/06e.jpg 2011/08/06f.jpg
  • 今年は、例年と比べて夜店が少なかった気がする。
  • 中央公園だけしか行ったことがないから、来年は小平グリーンロードを歩いてみたい。

ギークハウス武蔵小杉の歴史を書く

  • 色々と楽しいことが起こっているのに、それが外には全く伝わっていないので、毎月何が起こっているのかをまとめてみよう。
  • でも、あまり頑張り過ぎると途中で力尽きてしまうので、ゆっくり毎週ひとつしか書かないようにする
  • 今週は、1月分。→ギー杉月報 2011年1月

ソフトウェアキーボードの表示に追従してUIViewのサイズを変更

UIViewControllerのshouldAutorotateToInterfaceOrientationメソッドをオーバーライドすると、iPhoneを横に傾けたときにUIViewのサイズを自動的に変えて横表示してくれるようになります。

ならばソフトウェアキーボードを表示させたときも自動的にUIViewのサイズを変えてくれる方法はないのか? 探してみたのですが、なかなか見つかりません。どうもUIViewのサイズを自分で変更する必要があるようです。これをやらないと、例えば、全面にUITextViewを貼りつけた状態でソフトウェアキーボードを表示させると、キーボードの背後にUITextViewがまわってしまい全体が見れなくなってしまうので困ります。

キーボードの表示・非表示は、NSNotificationCenterオブジェクトを介して行えます。UIWindowで、下記の定数が定義されています。

  • UIKeyboardWillShowNotification
  • UIKeyboardDidShowNotification
  • UIKeyboardWillHideNotification
  • UIKeyboardDidHideNotification

名前から想像つくように、キーボードが表示される前、表示された後、非表示になる前、非表示になった後を通知するために使われます。

例えば、キーボードが表示された後にkeyboardDidShowメソッド、キーボードが非表示になった後にkeyboardDidHideメソッドを呼び出すには、こんな感じのコードを書きます。実際には、UIViewControllerのviewDidLoadの中で書くことになるでしょう。

[[NSNotificationCenter defaultCenter]
    addObserver:self
    selector:@selector(keyboardDidShow:)
    name:UIKeyboardDidShowNotification
    object:nil];
[[NSNotificationCenter defaultCenter]
    addObserver:self
    selector:@selector(keyboardDidHide:)
    name:UIKeyboardDidHideNotification
    object:nil];

このようにすると、keyboardDidShowメソッドでは、受け取ったNSNotificationオブジェクトのuserInfoを介して様々な情報を取得することができます。例えばキーボードが表示された後のサイズは、UIKeyboardFrameEndUserInfoKeyキーを指定して取得できます。ただし、ここで得られた座標は、convertRect:fromWindow:メソッドを使ってWindowの座標に変換する必要があります。さらに、UINavigationControllerを使っていてツールバーを下部に表示している場合にはそのサイズも考慮する必要があります。具体的には、こんな感じになりますが実際にはアプリケーションごとに変わってくると思います。

- (void)keyboardDidShow:(NSNotification *)aNotification
{
    CGRect keyboardRect = [self.view
        convertRect:[[[aNotification userInfo]
                      objectForKey:UIKeyboardFrameEndUserInfoKey]
                     CGRectValue]
        toView:nil];
    CGRect viewRect = self.view.frame;
    viewRect.size.height -= (keyboardRect.size.height
        - self.navigationController.toolbar.frame.size.height);
    self.view.frame = viewRect;
}

keyboardDidHideメソッドもほとんど同じです。上記ではviewRectからキーボードで隠れる分を引いていますが、keyboardDidHideメソッドではそれを逆に足すだけです。

通知が不要になったら、忘れずに登録を解除しましょう。viewDidUnloadなどに書いておけばよいでしょう。

[[NSNotificationCenter defaultCenter]
    removeObserver:self
    name:UIKeyboardDidShowNotification
    object:nil];
[[NSNotificationCenter defaultCenter]
    removeObserver:self
    name:UIKeyboardDidHideNotification
    object:nil];

以上で、キーボードに追従してUIViewのサイズが変わるようになります。画面を回転しても、そのたびにキーボードの非表示→表示の通知が来るので、適切にUIViewのサイズが変更されます。

同一カテゴリー内で前後ナビゲーション

標準のテーマのTwentyTenでは、各投稿ページ内に前後の投稿へ移動できるナビゲーションが付いています。ただし標準では順序がカテゴリーは関係なく全ての投稿を日付順に並べた状態になっています。

このようなルールはカテゴリーを明示的に使っているサイトでは、ちょっと違和感があります。そこで、同一カテゴリー内で前後に移動できるようにリンクを変更するようにしました。

例によって子テーマのfunctions.php内で何とかしたかったんですが、面倒になってきたのでテーマのファイルをそのまま書き換えてしまいます。

loop-single.phpを自作の子テーマにコピーし、previous_post_link関数とnext_post_link関数が使われている部分をこのように書き換えます。

<?php previous_post_link( '%link', '<span class="meta-nav">' .
 _x( '&larr;', 'Previous post link', 'twentyten' ) .
 '</span> %title', true ); ?>
<?php next_post_link( '%link', '%title <span class="meta-nav">' .
 _x( '&rarr;', 'Next post link', 'twentyten' ) .
 '</span>', true ); ?>

要するに、第三引数にtrueを加えるだけです。

これらの関数の第三引数の説明は以下のようになっています。

bool $in_same_cat: Optional. Whether link should be in same category.

そのうち、functions.phpの中だけで完結できるようにしたいな…

カテゴリー名をタイトルに挿入する

検索したときに、タイトルにeffy.jpと書いてあるだけでは何のことかわからないので、カテゴリー名もあったほうが親切かと思い、早速、タイトルにカテゴリー名を追加することにしました。

いまのタイトルはこんな感じ。

記事のタイトル | effy.jp」

それを、

記事のタイトル | カテゴリー名 | effy.jp」

こうしたい、ということです。

例によって、デフォルトのテーマには一切手を加えたくなかったので、子テーマのfunctions.phpに、

add_filter('bloginfo', 'cat_bloginfo', 1, 2);
function cat_bloginfo($result='', $show='') {
  if($show=='name' && !is_category()) {
    $cat = get_the_category();
    if(isset($cat[0])) {
      $result = $cat[0]->cat_name . ' | ' . $result;
    }
  }
  return $result;
}

と書いて、bloginfo関数を呼んだ時に、ブログ名の前にカテゴリー名も追加して返すようにフックを掛けてみました。

うまく行ったように思ったんですが、bloginfo関数は結構いろんなところで呼ばれているので、影響が大きすぎて嫌な感じでした。例えば、ヘッダのeffy.jpって文字の前にもカテゴリー名が追加されてしまう。

そこで、仕方なくデフォルトのテンプレートのheader.phpに手を加えて、記事タイトルとブログ名を表示する間に、これを挟みました。

// Add the category name.
if(is_single()) {
  $cat = get_the_category();
  if(isset($cat[0])) {
    echo $cat[0]->cat_name . ' | ';
  }
}

一応コレで目的は達成されたのだけれど、Wordpressをアップデートすると上書きされちゃうから面倒くさい…どなたか同じことを子テーマのfunctions.phpだけで実現できる方法教えてください!(泣)

ショートコードを使って画像を貼り込む

以前、スラッグを使ってリンクを貼るで書いたのと同じ方法で、画像を貼り込むことも出来ます。出力をimgタグにするだけなんで、簡単です。

そもそもWordPressにはメディア管理機能があるんですが、個人的にはファイル等をscpを使って自分で配置して表示したいので、ショートコードを使って画像を表示しています。さらに、TwitPicをよく使うので、それにも対応しました。

まず、普通に自分のサーバーに置いてある画像を表示する部分はこう書いています。右寄せやCSSのクラスなど、いろいろとオプションを指定できるようにしています。

function effy_img($atts,$content=null)
{
  extract(shortcode_atts(array(
      'path'   => '',
      'align'  => '',
      'clear'  => 'none',
      'class'  => '',
      'alt'    => ''
      ),$atts));
  if(trim($path)=='')
    return "";
  if($alt=='')
    $alt = $path;

  return "<img src='".effy_files_url($path)."' ".
         "style='clear:$clear;' alt='$alt' ".
         "class='align$align $class' />";
}
add_shortcode('img','effy_img');

さらに、サムネイルをクリックすると拡大画像のURLへ飛ぶためのショートコードもつくっています。これも昔の自作CMSで似たような機能を作っていたので実装してみました。

たとえば、[s-img path="2009/12/31f.jpg"]と書けば、このようにリンク付きのサムネイルを貼り込むことができます。

2009/12/31f.jpg
function effy_s_img($atts,$content=null)
{
  extract(shortcode_atts(array(
      'path'   => '',
      'target' => '_blank',
      'align'  => '',
      'clear'  => 'none',
      'class'  => '',
      'alt'    => ''
      ),$atts));
  if(trim($path)=='')
    return "";
  if($alt=='')
    $alt = $path;

  $s_img_path = dirname($path).'/s-'.basename($path);
  $a_url = effy_files_url($path);
  $img_url = effy_files_url($s_img_path);
  return "<a href='$a_url' target='$target'>".
         "<img src='$img_url' style='clear:$clear;' ".
         "alt='$alt' class='align$align $class' />".
         "</a>";
}
add_shortcode('s-img','effy_s_img');

そして、TwitPicに投稿した画像の表示。

function twitpic_img($atts,$content=null)
{
  extract(shortcode_atts(array(
      'id'     => '',
      'target' => '_blank',
      'align'  => '',
      'clear'  => 'none',
      'size'   => '',
      'class'  => '',
      'alt'    => ''
      ),$atts));
  if(trim($id)=='')
    return "";

  $size = in_array($size,array('large','full','big')) ? 'full' : 'thumb';
  $img_url="http://twitpic.com/show/".$size."/".$id;
  return "<a href='http://twitpic.com/$id' target='$target'>".
         "<img src='$img_url' alt='$alt' style='clear:$clear;' ".
         "class='align$align $class' />".
         "</a>";
}
add_shortcode('twitpic','twitpic_img');

こんな感じで、自作の子テーマのfunctions.phpに書いておけば、素早く画像を貼り込めるようになりました。

例えば、[twitpic id="52aqa6" align="right"]と書けば、右側にこのように貼り込めます。

普通は画像を表示しようとすると投稿のソースにHTMLでimgタグが書かれてしまって汚くなるのですが、ショートコードを使うとソースが汚くならなくて済むので、お気に入りです。

2011年5月26日(木)

  • ちょっとワケがあって、Linuxの動くネットワークスイッチを調べていた。 LannerAxiomtekPortwellAR InfotekWIN EnterprisesSoekris EngineeringAcrosser, etc…調べてたらきりがなかった。結構たくさんあるんだなぁ。Atomがファンレスで乗ってNICがたくさん付いてるとか、もうwktk以外のなにものでもない。たくさん買ってしまわないように気をつけなきゃ…。
  • ギー杉に追加の突っ張り本棚が届いた。@ltdと一緒に組み立てた。今度のやつは、天井の高さが高すぎて突っ張れないという事態は免れた。昔の突っ張れない突っ張り本棚は、天井が少し低くなっているところに移設する予定。
  • 夕食は、@kitaindia のキーマカレーとチャラマサラ。うまし!

2011年5月25日(水)

ギー杉でお好み焼き

  • 岡山では、まず生地だけ薄くプレートに流して、その上に具を盛っていくらしい。
  • ハバネロ入り。辛かったけどうまかった。