必要だったのでまとめた、その2。
その1はiPhone, iPad, iPod touchの画面サイズまとめ。
ホーム画面上に並ぶアプリアイコンやアイコン同士の間隔、アイコンに付くバッジの大きさを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)
cc licensed ( BY ) flickr photo shared by GONZALO BAEZA
必要だったのでまとめた。
必要だったのでまとめたシリーズその2はiPhoneホーム画面のアイコンとバッジ配置仕様チートシート作った。
| デバイス | 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がバラバラでワラタ。
new iPad, iPad 3, 第3世代iPadなどとも呼ばれている ↩
以下の抽出アルゴリズムを使って、URLを入力するとWebページのタイトルを抽出して返すYahoo! Pipesを作った。
上記のアルゴリズムを平行して実行し、結果は1つのJSONデータにまとめて返すようになっている。
このとき名寄せはしていないので、レスポンス内に複数のタイトル候補が現れることがある。
どのサービスのものを選択するかはユーザ側で自由に決めてもらえれば。
レスポンスの内容などはサンプルを叩いてみて適当に推測してちょうだい。
※このPipesは有用だと思いますが、動作の正確性や完全性、可用性をはじめレスポンス内容については無保証です
※また、予告無く変更される可能性があるため、サービスに組み込む場合にはオリジナルをcloneして利用することを推奨します
heroku config:add """FACEBOOK_APP_ID""" =000000000000000
heroku config:add FACEBOOK_SECRET=26cae7718c32180a7a0f8e19d6d40a59
heroku config:add LANG=ja_JP.UTF-8
Herokuのデータベース情報を
config/database.yml
用に抽出する。
ruby lib/get_pgdb_config.rb `heroku config -s |grep SHARED_DATABASE_URL`
#!/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
$("SELECTOR").keyup(function(e) {
if(e.keyCode == 13) { // Enter key code
do_something();
}
});
ちなみに、日本語入力の確定時のEnterは補足されない模様。
githubのLokkaリポジトリの右上にある「Fork」ボタンをクリック。
% git clone git@github.com:noriaki/lokka.git lokka-noriaki
% cd lokka-noriaki
% git co -b spike_new_feature
% emacs lib/lokka/entry.rb # codeを修正・追加
% emacs spec/post_spec.rb # ちゃんとtestも書く
localでテストするだけなら、最小構成は以下でインストールできる。
% bundle install --without=production:development:mysql:postgresql
% rake spec
% git ci -a -m "added new feature"
% git push origin spike_new_feature
)へ変更
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
が使えるようになる。
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が追加された。