MacPortsインストール
必要なもの
インストール方法
下記サイトよりパッケージをダウンロードしてインストーラに従ってクリックするのみ
http://www.macports.org/
※注意・・・インストールするとPATHに「/opt/local/bin」「/opt/local/sbin」が追加されるbash_profileにも設定が追加されるが、一度コンソールから抜け、再ログインすることでPATHが通るようになるので、一度コンソールから抜けるように
使い方
MacPorts自体のアップデート
$ sudo port selfupdate
パッケージの検索
$ sudo port search 検索語句
パッケージのインストール
sudo port install パッケージ名
パッケージのバージョンアップ一覧表示
$ sudo port upgrade installed
パッケージのバージョンアップ
$ sudo port upgrade パッケージ名
facebookでのopen graph protocolの対応について確認する
概要
facebook内で外部サイトのURLを告知する下記3つの方法について
open graph protocolがどのように反映されるのか確認してみる
- 今回記述したopen graph tag
- og:title
- og:description
- og:image
- og:url
open graph protocol
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to enable any web page to have the same functionality as a Facebook Page.
The Open Graph Protocol
http://ogp.me/
方法1 直打ち
facebookのフィードの「今なにしてる？」のテキストボックスに直接URLを書きこむ
- open graph protocolの内容が反映されたもの
- og:title -> タイトルとして表示
- og:description -> 説明文として表示
- og:image -> サムネイル画像として表示
- open graph protocolの内容が反映されなかったもの
- og:url -> リンク先URLに利用されず(直書きしたURLが反映)
方法2 「いいね！」ボタン
- open graph protocolの内容が反映されたもの
- og:title -> タイトルとして表示
- og:description -> 説明文として表示
- og:image -> サムネイル画像として表示
- og:url -> リンク先URLに利用
方法3 「送信」ボタン
「いいね！」ボタンと同じ
注意点
facebookはページのopen graph protocolの情報をキャッシュしてります。
open graph protocolが間違った状態で「いいね！」ボタンが押下されると
その後も、間違った状態で送信される。
facebookは24時間毎にページの情報を確認しにいき、httpヘッダーのcacheやexpireの情報を参考にアップデートされているか確認する
詳しくは下記を参照
- Like Button
When does Facebook scrape my page?
http://developers.facebook.com/docs/reference/plugins/like/
確認方法
facebookが取得したopen graph protocolは下記リンクで確認できる
http://developers.facebook.com/tools/lint/
JavaScriptの値の取得
値の取得とデフォルト値の設定
flight.equipmentがない場合、"default"が設定される
var middle = flight.equipment || "default"
undefinedのプロパティを参照するとTypeErrorになってしまうので&&を利用すると防げる
flight.equipment // undefined flight.equipment.model // "TypeError" flight.equipment && flight.equipment.model // undefined
スマートフォンサイトの制作 - 設計編 -
はじめに
iPhone+Androidスマートフォンサイト制作入門を読んだことを忘れないようにメモ
階層は浅く1ページを長く
- 3G回線で利用される為、PCのように何回もクリックして遷移するのには不向き
- 階層は浅くし1ページ内に多くの情報を収めるように設計する
- 長くなってしまったページはページ内リンクでユーザビリティを高める
画面(解像度)はiPhoneベース
縦
| 項目 | 表示領域 | アドレスバー | ツールバー | |
| 高さ | 356px | 80px | 44px |
横
| 項目 | 表示領域 | アドレスバー | ツールバー | |
| 高さ | 210px | 80px | 30px |
(※1)iPhone4は640 x 980pxだが、ブラウザは320 x 480pxで表示されるように設定されている
画面の向きに応じたレイアウトを行う
例えばテキストの文量。
テキストが多いページで横向きにした場合、1行の文字数が多くなり読みにく。
横向きの際は、レイアウトを変え、縦、横のどちらであっても1行の文字サイズを同じするなど配慮が必要
画面の向きでスタイルを変える方法はCSS3のメディアクエリのorientaionを使う
- 縦：portrait
- 横：landscape
詳しいしようはこちら
<link rel="stylesheet" media="all and (orientation:landscape)" href="land.css">
長いページを使いやすくする
- 階層を浅く1ページの量を増やす為、ページが長くなりがち。
- 対処方法は下記3つ
- ページ内リンクを配置する
- 要素を折りたためるようにする
- タブで区切る
タップしやすくする
- ほとんどの操作を指先で行う為、リンク要素が大きくなくてはならない
- 対処方法は3つ
- 大きなボタンを配置する
- リストにし、リスト要素すべてをリンク対象にする
- アイコンを配置する(iPhoneの画面のように)
文字サイズを大きくする
- 目安は14〜15px程度
画像の量を抑える
- 3G回線で利用されるため、なるべく容量を抑える
PNG画像を活用する
- PNG8
- GIFと同じ256色を表現できるが、圧縮率が高く、軽い画像を作成できる
- pNG24/32
- フルカラー
- 複数の背景とあさせて綺麗に表示できる
- JPEGと比べると圧縮率は低い
リンク要素は分かりやすく
- PCではロールオーバーでリンク要素を区別するときがあったが、スマフォではできない
- 初見でリンクであるとわかりやすくする
スマートフォンサイトの制作 - 基礎編 -
はじめに
iPhone+Androidスマートフォンサイト制作入門を読んだことを忘れないようにメモ
iPhoneの仕様を確認
端末
- iPhone3G
- iPhone3G S
- iPhone4
- ipad
解像度
- iPhone3G、iPhone3G S : 320 x 480px
- iPhone4 : 640 x 960px
iPhone4はiPhone3G、iPhone3G Sと比べて解像度が2倍あるが、 ブラウザーは100%表示時に320 x 480pxで表示する仕様になっている為、見た目が変わらない
ウィンドウ制御
-
- ウィンドウ制御ができない
・iPhoneアプリ常に全画面表示され、ウィンドウサイズの変更ができない ・JavaScriptによポップアップウィンドウは標準で警告ができるように設定されている
ファイルアップロード、ダウンロード
- ファイルのアップロード、ダウンロードができない
コンテンツ制限
- ファイルサイズなどに制限事項あり
- GIF/PNG/TIFF画像：デコード時の状態で3Mpx以下
- JPEG画像：デコード時の状態で32Mpx以下
- canvas要素：3Mpx以下
- HTML、CSS、JavaScriptなどの各ファイル：各10MB以下
- JavaScript：処理時間10秒まで
フォント
- 日本語フォントはゴシック体(ヒラギノ角ゴ)のみ
CentOS5にGitをインストール&あれこれ
インストール
yumのレポジトリ追加
通常のyumのレポジトリにGitがないため、新規でレポジトリを追加
% vim /etc/yum.repos.d/CentOS-Base.repo ----以下を追記-------- [dag] name=Dag RPM Repository for Redhat EL5 baseurl=http://apt.sw.be/redhat/el$releasever/en/$basearch/dag gpgcheck=1 enabled=1 gpgkey=http://dag.wieers.com/packages/RPM-GPG-KEY.dag.txt
インストール
% yum -y install git % git --version
テストプロジェクト作成
- http://github.comでtest-projectを作成
- レポジトリを作成した段階で表示される下記メモをコピーしておく
全体設定 ダウンロードおよびインストール Git git config --global user.name "kashiro" git config --global user.email ksrtmyk@gmail.com Add your public key 次の手順: mkdir test-project cd test-project git init touch README git add README git commit -m 'first commit' git remote add origin git@github.com:kashiro/test-project.git git push -u origin master すでにGitリポジトリがありますか? cd existing_git_repo git remote add origin git@github.com:kashiro/test-project.git git push -u origin master
確認
下記が表示されればOK
% ssh git@github.com The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)? yes Warning: Permanently added 'github.com,207.97.227.239' (RSA) to the list of known hosts. Enter passphrase for key '/home/ksrtmyk/.ssh/id_rsa': Hi kashiro! You've successfully authenticated, but GitHub does not provide shell access. Connection to github.com closed.
- 参考
基本操作
- Gitの基本的な概念はこちら
- より詳しい操作はこちら
1 remoteのレポジトリをクローンする
% git clone [url]
＊別の名前でコピーしたい場合
% git clone [url] [dir_name]
2 ファイルを追跡ファイルにする(ステージにする)
% git add [file name]
4 ステージされている変更と直近のコミットの内容を比較
% git diff --staged
5 コミット
*-aを追加することで、修正されたファイルを一気にコミット(addを省略)
% git commit -m "[comments]" % git commit -a -m "[comments]"
6 リモートのレポジトリに名前を付与する
% git remote add [remote-name] [github url]
*現在のリモードレポジトリの名前を確認
% git remote -v
7 リモートレポジトリの内容を引き出す
*引き出すだけで、マージはされない
% git fetch [remote-name]
8 リモートレポジトリの内容を引き出し、マージする
% git pull [remote-name]
９リモートレポジトリに内容を登録
% git push [remote-name]
CentOSへのnode.js環境構築
依存パッケージのインストール
先に必要になるものをいれておく
% yum install zlib-devel % yum install openssl-devel % yum install python
node.jsのインストール
ダウンロード
インストール
% tar zxvf node-vXX.XX.tar.gz % cd node-vXX.XX % ./configure % make % sudo make install
起動
ファイル配置
下記ファイルを適当な場所に配置
// モジュールの読み込み
var http = require('http');
// サーバを起動する
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
起動
% node example.js % Server running at http://127.0.0.1:8124
