1. /
  2. 2011年 12月

2011年 12月 の投稿一覧

WEB+DB PRESS Vol.66 HTML構造化特集より

WEB+DB PRESS Vol.66WEB+DB PRESS Vol.66 by 猪狩 丈治

WEB+DB PRESS Vol.66 HTML構造化特集で印象に残ったことのメモ。

HTMLタグは2つの性質をもつ

  • 意味
  • レイアウト

<p>タグの場合だと、

  • 段落であること
  • 幅いっぱいに広がり縦に並んでいくブロック

という2つの性質がある。

floatとposition:absoluteの使い分け

  • トルツメ：float
  • トルママ：position:absolute

という、使い分けをする。

トルツメ、トルママという言葉は初めて聞いたのですが、デザイン用語のようで

トルツメ
情報が抜き取られた場合、後続の要素が詰まる現象
トルママ
情報が抜き取られた場合、後続の要素が詰まらずそのままの現象

ということのようです。

margin、paddingのどちらを使うか

イメージとして

  • item:家
  • padding:庭
  • border:塀
  • margin:道路

とすると決めやすい。

marginの所有権

これもいつも悩みどこなんですが、

トルツメされた場合を考えて、どちらの要素にトルツメが起きても「予測しない余白」が残らないようにするためには、どちらの要素がmarginを持つべきか考えます。

なるほど。

実践

demo1

demo2

XCode 4のスニペットをDropboxで同期する

Snippets — Code Snippet Manager for Mac OS Xを使っている人も多いようなのですが、XCode 4から導入されたCode Snippet Libraryも結構使えるので、今はそちらを使っています。

複数開発マシンがある場合は、同じ環境で開発したいのでスニペットをDropboxで同期してどのXCodeからも使えるようにします。

コードスニペットは

~/Library/Developer/Xcode/UserData/CodeSnippets

に保存されるので、この中身をDropboxに移動して、CodeSnippetsフォルダを削除しておきます。

その後、MacDropAny.という

特定のDropboxに置いてあるフォルダのシンボリックリンクを作成するアプリで

~/Library/Developer/Xcode/UserData/CodeSnippets

の場所にシンボリックリンクを作ればＯＫ！

SBTickerViewでFlipboard風のUIを実現する

FlipboardのUIは操作性、見た目ともにすごく好きです。

http://www.youtube.com/watch?v=YOQAGmXOERI

そんなUIをSBTrickerViewを使うと簡単に実現できます。

githubからcloneすると、デモプロジェクトが一緒になっているのでそれを参考にサンプルを作って見ました。

blommegard/SBTickerView – GitHub.

UIImageを使えば写真、SBTickViewというクラスを使えばテキストをパラパラと表示できます。
SBTickViewを参考に拡張すれば画像とテキストを重ねたものも作れるかもと思いました。

写真をパラパラめくるアプリ



サーバー設定変更メモ @ServersMan

不要なポートを閉じる

設定確認してたら、mysqlとsshのデフォルト22番ポートが解放されてたので閉じた。

netstatで確認してたらmysqlとssh(22)のポート開いてるorz.

[root@suusuke ~]# netstat -a
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address               Foreign Address             State      
tcp        0      0 *:mysql                      *:*                         LISTEN      
tcp        0      0 *:ssh                      *:*                         LISTEN

mysql

[root@suusuke ~]# vi /etc/my.cnf 

[mysqld]セクションに skip-networking を追加

[root@suusuke ~]# service mysqld restart
mysqld を停止中:                                           [  OK  ]
mysqld を起動中:                                           [  OK  ]

ssh(22)

[root@suusuke ~]# vi /etc/ssh/sshd_config 

portが２つ(デフォルト:22と別で設定したもの)が設定されてたので22をコメントアウト

[root@suusuke ~]# service sshd restart
sshd を停止中:                                             [  OK  ]
sshd を起動中:                                             [  OK  ]

netstatでmysqlとsshが表示されないことを確認！

Xcodeが最新なのにiOS5 SDKがインストールされてない

iOS5 SDKが無いせいで実機にビルド、転送する際にビルドできないとなってしまいました。
※プロジェクトの設定でBase SDKでiOS5(Lastest iOS)が選択できないため
SpotlightでXcodeを検索してInstall Xcodeを実行するとiOS5 SDKインストールできるとどこかのブログに書いてあったので実行したらインストールできました。

プロビジョニングファイル作成から実機転送手順

プロビジョニングファイルを作成し、iPhone実機でテストする際の手順。

開発マシンで証明書署名要求(CSR)作成

開発用証明書(Development/Developer Certificate)を生成するために使用される個人情報が含まれてる。
iOSプロビジョニングポータルにこの要求を提出し、開発用証明書を取得する。

  • [アプリケーション] -> [ユーティリティ] -> [キーチェーンアクセス]から、キーチェーンアクセスを起動。
  • キーチェーンアクセスのメニューの「環境設定」を起動。
  • 「一般・First Aid・証明書」とあるので、証明書をクリック。
  • 「オンライン証明書状況プロトコル（OCSP）」を「可能な場合に適用」
    「証明書執行リスト（CRL）を「可能な場合に適用」
    「優先順位」を「OCSP」に設定。
  • キーチェーンアクセスのメニューから　[証明書アシスタント] -> [認証局に証明書を要求]
    • ユーザーのメールアドレス：iOS Dev Centerに登録しているメールアドレス。
    • 通称：iOS Dev Centerに登録している名前。（iOS Dev Centerにログインして、右上に表示されている名前）
    • CAのメールアドレス：空白。
    • 要求の処理：ディスクに保存、鍵ペア情報を指定にチェック
  • 上記を設定して「続ける」ボタンクリック。
    • 鍵のサイズ：2048ビット
    • アルゴリズム：RSA
  • 上記に設定して「続ける」ボタンクリック。

証明書署名要求(CSR)の登録と開発用証明書の取得

  • ブラウザで、iOS Dev Centerにログインして、右側にある「iOS Provisioning Portal」にアクセス。
  • 左のメニューから「Certificates」にアクセス。
  • 一番最初であれば、 「Request Certificates」ボタンをクリック。
  • 画面下にファイル選択用のボタンをクリックして証明書署名要求ファイルを選択。
  • Submitボタンをクリック。
  • Certificatesの一覧ページになるので、しばらくして再読込すると「Download」ボタンが表示されるので、クリックして保存。
    その下の「If you do not have the WWDR intermediate certificate installed, click here to download now.」 のリンクのファイルを保存。

開発用証明書の登録

  • キーチェーンアクセスを開き、ダウンロードした、「developer_identity.cer」ファイルを　[ログイン] -> [自分の証明書]　のところへドラッグして登録する。
    もう一つダウンロードしたファイルの「AppleWWDRCA.cer」はダブルクリックして登録する。

プロビジョニングファイル登録・デバイス転送

  • Xcode4のオーガナイザを開き、転送する実機をUSBのケーブルで繋ぐ。
  • DEVICESの下に実機の名前が表示されたら、DEVICE名をクリックして、下にある「Add to Portal」をクリック。
    自動的にiOS Dev Centerに接続してiPhoneの登録をしてくれる。
  • iOS Dev Centerに戻り、左のメニューの「App IDs」をクリック。
    ※一度作成したAppIDは、削除出来ない。
  • 右上にある「New App ID」ボタンをクリック。

    • Discription：半角英数字で入力。アプリ名と同じだとわかりやすい。
    • Bundle Seed ID (App ID Prefix)：Generate New
    • Bundle Identifier (App ID Suffix)：ドメインを逆にしたもの＋アプリ名か、*にするとよい。
    • com.yourdomain.appname or com.yourdomain.*

    ここに設定したBundole IdentifierとXcodeのinfo.plistのBundle identifierは同じにする。

  • 設定したら「Submit」ボタンをクリック。
  • Xcode4に戻り、左のプロジェクト名をクリック。
  • Projectをクリックして、Build SettingsのCode Signing IdentityのDebugをTeam Provisioning Profileに変更する。Any iOS SDKも同じように変更。
  • TERGETSをクリックして、Build SettingsのCode Signing IdentityのDebugをTeam Provisioning Profileに変更する。Any iOS SDKも同じように変更。
  • iPhoneをUSBのケーブルでつなぎ、Schemeをクリックして、iPhoneの名前を選択して、Runをクリック。実機に転送される。

2台目以降のMacで開発する場合

複数のMacで開発する際の証明書 | iPhoneアプリ開発雑記帳.

iPhone Developer Program 登録

iPhone Developer Program に登録した際の備忘録です。

登録

  • iOS Developer Program – Apple Developer. から [今すぐ登録]から登録を行います。

  • [続ける]をクリック。

  • 既にApple Developerには登録済みだったので、既にアップルデベロッパとして登録済みの方のアップルデベロッパとして登録済みで、アップルデベロッパプログラムに登録を希望します。を選択後、[続ける]をクリック。
  • Are you enrolling as an individual or company? 個人用か？法人用か？と聞かれるので個人用(individual)の方[Individulal]をクリック。
  • 登録してあるApple IDで Sing in する。

  • 住所等入力して[Continue]をクリック。
    一応、ローマ字で入力。

  • iOS Developer Programを選択し、[Continue]をクリック。
  • 入力内容を確認して、[Continue]をクリック。
  • 規約を読み、同意したらチェックボックスにチェックして、[I Agree]をクリック。
  • [Add to cart]ボタンをクリック。
  • Apple Store に移動するので、ライセンスを購入する。
    購入手続きが完了すると購入完了のメールが届く。

認証(アクティベーション)

購入完了のメールの後に[ Apple Developer Program Activation Code ] と言うメールが届くので、メール内にあるアクティベーションのリンクをクリックする。
※私の場合は1h後くらいにメールが届いた。

しかし、We are unable to activate your Apple Developer Program membership.というエラーメッセージが表示されてしまって、アクティベーションに失敗する。

これはよくあることのようで、私もApple IDに登録している個人名を日本語で登録していたのでこのようになってしまったようだ。
この個人名はApple Developerページへ変更してもどうしても変更できない箇所であった。

サポートからメール送ってくださいと記載あるので、How to Contact Us – Apple Developer.から

Subject
iOS Developer Program Enrollment Status
Your region
Japan
Request Details
日本語でアクティベーションできない旨と、名前をローマ字表記に修正してくださいと記載(Enrollment IDも記載)

として、メールを送った。

翌日には、

Apple Developer Program のメンバーシップをご購入いただく場合、請求先情報と iOS Developer Program 登録情報を比較するシステムを使用しております。最近いただいたご購入の情報には、購入プロセスが完了せず、保留状態になっておりました。

確認させていただいたところ、保留状態を解除いたしました。お受け取りになった Activation Code メールを再度ご確認いただき、リンクをクリックしたいただくようお願いいたします。アカウントを認証出来るはずです。

というメールが届いていたので、再度アクティベーション行ったところ正常に認証されました。
また、個人名についてもローマ字表記に修正されていました。

ブラウザとOS別に適用するCSSのクラスを指定できるJSのご紹介

ひょんな事から、スマートフォンサイトのHTMLコーディングを最近しております。

スマートフォンサイトはバリバリHTML5が使えるので楽しいですね。

スマートフォンサイトのコーディングする際は、webkit系のブラウザかiOSシュミレーターのsafariである程度確認してから、実機で確認という流れで表示確認してたのですが、Windowsのsafariでもズレがないようにコーディングして下さいと上から申し出がありました。
※本当に対応する必要があったかは謎ですが。。。

Windowsのsafariでずれる原因はfontが”メイリオ”になってしまい、”ヒラギノ角ゴ”などと比べるとline-heightが高いので、水平に配置しても微妙にずれがでてしまってました。

他に影響が出ないようにと、工数が少ない中だった事もあり、今回はCSS Browser Selector.を使って、Windowsのsafariだった場合のスタイルを定義して対応しました。

これはホント便利ですね。