iPhoneホーム画面のアイコンとバッジ配置仕様チートシート作った

必要だったのでまとめた、その2。

その1はiPhone, iPad, iPod touchの画面サイズまとめ

iPhone5 icon position cheatsheet

ホーム画面上に並ぶアプリアイコンやアイコン同士の間隔、アイコンに付くバッジの大きさをpx単位でまとめてチートシート化した。
バッジがアプリアイコンからはみ出す幅も書いてあるが、バッジサイズに関わらずはみ出す幅は同じなので1カ所分だけ記載してある。というか、アイコン同士の間隔は4列あるうち中央2列の間だけ他のものより2px大きいんだな。(1列目と2列目の間と3列目と4列目の間は38px、中央の2列目と3列目の間は40pxだった)

上の画像をクリックすると原寸サイズの画像が見られる。また、下のリンクからPDFにしたものが見られる。

とりあえず、iPhone5用のものだけ。他のサイズも気が向いたら作ろう。
iPhone-icon-position-cheatsheet_ver0.1.pdf (Last Update:2012/11/19)

iPhone, iPad, iPod touchの画面サイズまとめ


cc licensed ( BY ) flickr photo shared by GONZALO BAEZA

必要だったのでまとめた。

必要だったのでまとめたシリーズその2はiPhoneホーム画面のアイコンとバッジ配置仕様チートシート作った

iPhone, iPad, iPod touchの画面サイズまとめ

デバイス Retina? 画面サイズ(縦x横px) 解像度(ppi)
iPhone5 Retina 1136×640 326
iPhone4S Retina 960×640 326
iPhone4 Retina 960×640 326
iPhone3G 480×320 163
iPhone3 480×320 163
iPad mini 1024×768 163
iPad Retina 1 Retina 2048×1536 264
iPad2 1024×768 132
iPad 1024×768 132
iPod touch 第5世代 Retina 1136×640 326
iPod touch 第4世代 Retina 960×640 326

iPad miniはRetinaディスプレイじゃないのね。知らなかった。
あと、Appleの技術仕様ページのURLがバラバラでワラタ。

出典

iPhone
http://www.apple.com/jp/iphone/compare-iphones/
iPad
http://www.apple.com/jp/ipad/compare/
iPod touch
http://www.apple.com/jp/ipod/compare-ipod-models/

  1. new iPad, iPad 3, 第3世代iPadなどとも呼ばれている 

URLを入力にしてWebページのタイトルを抽出するYahoo! Pipesを作った

Extract Page Title by Yahoo! Pipes

これはなに?

以下の抽出アルゴリズムを使って、URLを入力するとWebページのタイトルを抽出して返すYahoo! Pipesを作った。

上記のアルゴリズムを平行して実行し、結果は1つのJSONデータにまとめて返すようになっている。
このとき名寄せはしていないので、レスポンス内に複数のタイトル候補が現れることがある。
どのサービスのものを選択するかはユーザ側で自由に決めてもらえれば。

サンプルリクエスト

http://pipes.yahoo.com/pipes/pipe.run?_id=0dcfb1733702abccc3f281395835a0e0&_render=json&url=http%3A%2F%2Fwww.google.co.jp%2F

レスポンスの内容などはサンプルを叩いてみて適当に推測してちょうだい。

※このPipesは有用だと思いますが、動作の正確性や完全性、可用性をはじめレスポンス内容については無保証です

※また、予告無く変更される可能性があるため、サービスに組み込む場合にはオリジナルをcloneして利用することを推奨します

HerokuでFacebookアプリをつくるときの初期設定

heroku config

heroku config:add """FACEBOOK_APP_ID""" =000000000000000
heroku config:add FACEBOOK_SECRET=26cae7718c32180a7a0f8e19d6d40a59
heroku config:add LANG=ja_JP.UTF-8

database settings

Herokuのデータベース情報を
config/database.yml

用に抽出する。

ruby lib/get_pgdb_config.rb `heroku config -s |grep SHARED_DATABASE_URL`

lib/get_pgdb_config.rb

#!/bin/env ruby
# -*- coding: utf-8; mode: ruby; -*-
require "yaml"

if ARGV.size == 1
  config = {}
  database_url = ARGV.shift
  params = database_url.split("/")
  username = params[3]
  host = params[2].split("@")[1]
  database = username
  password = params[2].split("@")[0].split(":")[1]
  config["production"] = {
    "encoding" => "unicode",
    "adapter" => "postgresql",
    "username" => username,
    "port" => 5432,
    "host" => host,
    "database" => database,
    "password" => password
  }
  puts config.to_yaml
else
  puts "[USAGE] #{__FILE__} SHARED_DATABASE_URL"
end

Lokkaをgit cloneしてからpull requestするまで

Lokkaをgithubでforkする

githubのLokkaリポジトリの右上にある「Fork」ボタンをクリック。

forkしたLokkaを自分のlocal環境へclone

% git clone git@github.com:noriaki/lokka.git lokka-noriaki

変更用のbranchを作りcodeに変更を加える

% cd lokka-noriaki
% git co -b spike_new_feature
% emacs lib/lokka/entry.rb # codeを修正・追加
% emacs spec/post_spec.rb # ちゃんとtestも書く

gemをインストールしてrspecによるunit testを走らせる

localでテストするだけなら、最小構成は以下でインストールできる。

% bundle install --without=production:development:mysql:postgresql
% rake spec

testをパスしたらcommitして自分のremoteリポジトリへpush

% git ci -a -m "added new feature"
% git push origin spike_new_feature

いざpull request

  1. 自分のremoteリポジトリへ行って
  2. branchを今回の作業で作った変更用branch(
    spike_new_feature

    )へ変更

  3. 右上にある「pull request」ボタンを押す

※参考:GitHubへpull requestする際のベストプラクティス

LokkaにFacebook OGP metaタグを追加する

OGPタグ用のHelperをつくる

lib/lokka/helpers.rb

に meta\_ogp メソッドを追加する。

def meta_ogp
  s = yield_content :meta_ogp
  s unless s.blank?
end

さらに、OGPタグを読み込む位置でこのメソッドを呼び出すために、

public/theme/theme-name/layout.erb

のmetaタグ周辺に追加した。

<%= meta_ogp %>

これでLokkaの各Viewで
content_for :meta_ogp

が使えるようになる。

各エントリの情報をOGPタグに設定して読み込む

public/theme/theme-name/entry.erb

の末尾に以下を追加する。

<% content_for :meta_ogp do %>
  <meta property="og:type" content="article"/>
  <meta property="og:site_name" content="<%= @site.title %>"/>
  <meta property="og:url" content="<%= base_url + @entry.link %>"/>
  <meta property="og:title" content="<%= @entry.title %>"/>
  <meta property="og:description" content="<%= @entry.snippet_body %>"/>
<% end %>

og:description

の値に設定されている

@entry.snippet_body

は、本文の先頭200文字を返すメソッド。
コードは以下の通り。
lib/lokka/entry.rb

のEntryクラスに追加する。

def snippet_body
  @snippet_body ||= Nokogiri(
    "<html><head></head><body>#{self.body}</body></html>"
    ).text[0..200]
end

self.body

には、各MarkupでHTMLコード化された本文が入ってるので、
それをHTML文書にしてNokogiriで解析してテキスト化してる。

これで、各エントリのページにOGPが追加された。