2012年9月28日金曜日

iPhone, Androidの画面設計(Wireframe)用Free素材を探す

create_wireframeiPhone, Android Appを設計するにあたり、Wireframeを作成するための素材を集めたときの覚書.

前の記事で紹介したようにGoogle Docからtemplateを検索してもWireframeっぽいのが見つかる。

参考Site.

下記SiteからiPhone, AndroidのUI ComponentがDownload出来る。

結局、Fireworksを使って一からWireframeを書いた。Adobe Official Siteに作成方法があるので参考に。

このFireworks拡張機能はInstallしておくと便利かも。

 

 

< Related Posts >

2012年9月27日木曜日

特定のIP Address以外は閲覧を制限(503 Pageを表示)するNginxのconf設定

nginx_maintenance_messageNginxの環境でサーバーメンテナンス中に「しばらくお待ちください。」のメッセージを表示する方法。

環境: CentOS 5.8, nginx 1.2.3

参考にしたのは下記Site.

maintenance.htmlを用意して、下記をnginx.confに追記する。

### Start - Show the maintenance page.
error_page 503 @maintenance;
location @maintenance {rewrite ^(.*)$ /maintenance.html break;}
set $flg "true";
if ($remote_addr = "127.0.0.1" ) {set $flg "false";}
if ($remote_addr ~ ^192\.168\. ) {set $flg "false";}
if ($flg = "true") {return 503;}
###  End  - Show the maintenance page.

これはIP Addressが「127.0.0.1」か「192.168.*」以外はmaintenance.htmlを表示する設定。

if文の書き方はOfficial Wikiを参考に。

conf全体は以下のようになった。

server {
    listen       80;
    server_name  hoge.com;

    root    /home/httpd/hoge/httpdocs;
    index   index.php index.html index.htm;
    charset utf-8;

    location = /robots.txt  { access_log off; log_not_found off; }
    location = /favicon.ico { access_log off; log_not_found off; }

    ### Start - Show the maintenance page.
    error_page 503 @maintenance;
    location @maintenance {rewrite ^(.*)$ /maintenance.html break;}
    set $flg "true";
    if ($remote_addr = "127.0.0.1" ) {set $flg "false";}
    if ($remote_addr ~ ^192\.168\. ) {set $flg "false";}
    if ($flg = "true") {return 503;}
    ###  End  - Show the maintenance page.

    location / {
    }

    location ~* \.php$ {
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        fastcgi_intercept_errors on;
        include        fastcgi_params;
        client_max_body_size 20M;
    }

    location ~ /\. {
        deny  all;
        access_log off;
        log_not_found off;
    }

    # if the file is not found, forwarded to index.php (permalinks)
    if (!-e $request_filename) {
        rewrite ^/(.*)$ /index.php?q=$1 last;
    }
}

 

< Related Posts >

2012年9月21日金曜日

【PHP】Facebook Graph APIを使ってFacebook内の情報を取得する

get_from_facebook_graph_apiWordPressで作成されているSiteにFacebookに投稿されている写真を取得して表示するPluginを作成したときのMemo.

環境: PHP 5.3.15, WordPress 3.4.2, Facebook SDK for PHP 3.2.0

Facebook公式のPHP用SDKが公開されているのでこれを使うのが簡単。詳細は下記Siteで。

基本はapi Methodを使って欲しい情報をRequestするだけ。公開されている情報なら認証する必要もないApp DashboardからApp IDとApp Secretを取得する必要あり。

例えば

コカ・コーラ Pageの基本情報(Graph API Explorerでの結果

$facebook->api('/cocacola');

 

コカ・コーラ PageのAlbum一覧(Graph API Explorerでの結果

$facebook->api('/cocacola?fields=albums');

 

コカ・コーラ Pageの「Vakantiefoto's :-)」から写真一覧。(Graph API Explorerでの結果

$facebook->api('/10151960999678306/photos?limit=4&offset=2');

Pagingの指定方法は下記を参考に。

 

json_decodeした結果を返してくるので簡単便利。その他詳細はFacebook Developersで。

 

< Related Posts >

2012年9月18日火曜日

SEO対策のためにGoogle Placesに登録してGoogle+ LocalとLinkする

google_places_localJKA(Japan Karate Association) SingaporeのWeb siteを作ったので、SEO対策も兼ねてGoogle Mapsで検索しても表示されるようにしてみた。

まず、Google WebmastersとGoogle Analyticsは導入してアクセス解析できるようにしておく。

 


Google Mapsに表示されるためにGoogle Placesから登録申請する

登録自体は無料。登録方法は下記Siteが分かりやすい。

Titleなどを入力するときは、Official Blogを参考に分かりやすく品質ガイドラインに違反しないように気をつける。

ちなみに登録したのは空手をやってるCommunity Center/Clubの場所。Community Centerのおばちゃんに「GoogleからLetterが来たら教えて」と言っておく。

 


Googleから送付されたPINを登録

送付されて来たLetterを見ると送信元が東京で送信日時が2012/08/10。SingaporeのCommunity Centerで私が受け取ったのは2012/09/03。
PINを登録して、Google Mapで表示されるようになったのが2012/09/15。

結構時間が掛かるので、電話でPINを受け取れる人はそうした方が手っ取り早い。

 


Google+ LocalとLink

今Google Mapに登録すると、Google+ localに自動で登録されるみたい。以前Google Placesを使っていた場合は移行が必要(?)

登録直後のGoogle+ Localの画面

image

写真とかクチコミを入れてみた。

 

< Related Posts >

2012年9月13日木曜日

WordPress + BuddyPressで会員制Community Site (SNS)開発

buddypress_wordpressWordPressをSNSにするPlugin"BuddyPress"をInstallして、会員制のCommunity Siteを構築しているときのMemo.

環境: WordPress 3.3.2, BuddyPress 1.5.5

個人的にはWordPressに慣れているので、本体に手を加えないでTheme、Pluginからhookして大体の事は実現できる自信がある。だけど最近はImpressCMSも人気があるCMSの一つなので、場合によってはこちらの方が簡単かもしれない。

ちなみに作ったのはこちらのSite.

 


BuddyPressの概要

特別な設定なしでWordPressをSNS化するPlugin.

以前はWordPressをMultisite(Network)化する必要があったけど、今はBuddyPress自体に会員認証(User Activation)機能を持つようになったので、使いやすくなった。

ちなみに会員制SiteにするためにAbsolute PrivacyWP-MembersというPluginもある。

下記Siteも参考に。

 


bp-defaultをCopyしてThemeを作成

BuddyPressのOfficial Documentでは、bp-defaultをCopyせずに継承して、必要なTemplate Fileだけ上書きするような"Child Theme"が推奨されている。詳しくは下記。

私の場合は、この機能を利用せず一からThemeを作成。

 


開発用Reference

Official Siteにも簡単なReferenceがあるけど、詳細な解説まで記載されてない様子。

Source CodeをGrepした方が分かりやすい。

外から利用できるFunctionは下記File. ざっと眺めておいた方がいいかも。

  • /buddypress/bp-core/bp-core-functions.php
  • /buddypress/bp-core/bp-core-template.php

BuddyPressを利用したPluginを開発するときは、templateが用意されているので、それを使うと早い。

 

< Related Posts >

2012年9月12日水曜日

Titanium StudioにKitchenSink(コードサンプル集)をGitHubからDownload, Install

Titaniu-Studio_on_windows7前の記事でTitanium StudioをInstallして、Android, iOS開発の環境を構築したので、今度はGitHubで公開されているKitchenSinkというコードサンプル集をInstallしてみた。

iOS開発の「UICatalog」のように何が出来るか確認するのに便利。

環境: Windows 7 64bit, Titanium Studio 2.1.2

 

基本はiOSの場合と同じ。

File → Import... → Git → Git Repository as New Project

URIにGitHubのAddressを入力する

https://github.com/appcelerator/KitchenSink.git

WorkspaceにDownload後、Project Explorerから「Run As」 → 「Android Emulator」を選択するとCompileからInstallまでやってくれる。結構時間が掛かる。。。

image

起動するとこんな感じ。

image

File, Folderの構成や考え方は「CommonJS」に基づいているらしい。

これもやりながら覚える。

 

< Related Post >

2012年9月11日火曜日

Titanium Studioの開発環境をWindows 7に構築

Titaniu-Studio_on_windows7何回もInstall, Uninstallを繰り返したのでMemo.

もう開発するときは大人しくOSX使って下さいという雰囲気を感じる。。。

環境: Windows 7 64bit 英語版

参考にしたのは下記Site.

事前準備と注意点

  • 既にJDKがInstallされていたら全部Uninstallして再起動する
  • JDK 6(Java SE 6) x86(i586)をInstallする(7でもx64でもない)
  • Android SDKをInstallする場所は空白を含まないPathにする

 


1. JDKをInstall

Java SE 6 UpdateのDownloadを選択して「Windows x86」をDownloadしてInstall.

Computerを右Click → Properties → Advanced system settings →Advanced → Environment Variables

System variablesのNew...をClickして環境変数を追加する

Variable name: JAVA_HOME
Variable value: C:\Program Files (x86)\Java\jdk1.6.0_35

環境変数PATHに次の値を追記(javacを実行出来るようにする)。

;%JAVA_HOME%\bin

 


2. Android SDKをInstall

Official SiteからDownload, Install(installer_r20.0.3-windows.exe).

Destination Folderは「C:\Android\android-sdk」

Install後Android SDK Managerが立ち上がるので、「Android 2.2」を選択して、Install.

環境変数PATHに次の値を追加する

;C:\Android\android-sdk\tools;C:\Android\android-sdk\platform-tools

 


3. Titanium StudioをInstallと設定

AppceleratorのOfficial SiteからTitanium StudioをDownloadする(要会員登録)。

この時点のVersionは 2.1.2

Installが完了したらAndroid SDKの設定をする

Window → Preferences → Aptana Studio → Titanium

Android SDK Home: C:\Android\android-sdk

image

試しにProjectを作ってみる。

Create Project → Titanium Mobile Project → Default Project

下図を参考に。

image

作成したらAndroid Emulatorを起動。

image

無事Emulatorが起動したら、「Titanium Android Emulator - HelloWorld」を選択して、Appを起動してみる。

image

image

app.jsを眺めてみると、簡単に出来そうな予感がする。

次回はKitchen Sinkを動かしてみる。

 

< Related Posts >

2012年9月10日月曜日

Singaporeで安いレンタルサーバーを探す

rent_server_in_singaporeJKA SingaporeのWeb Siteを作ったときに、Singapore国内にServerがあって安いところはないものかと調べてみた。

見つけたのはここ。

1年契約すれば月S$5(月額約315円)。Data転送量の制限とかないし、とりあえずHomepageを置いとくのはいいんじゃないかな。Share Serverなので、応答が返ってくるのが異様に遅いときがある。

専用IP Addressにするには年間S$60追加で必要。

Domainを別で管理している場合は、Name ServerをSingapore Hostが提供しているのに変更すれば、専用IP Addressを取得しなくても大丈夫。FAQにも書いてある。

Name Serverは登録後Supportに問い合わせると教えてくれる。

ちなみにDomainは下記で管理している。

当初は固定IPだと思って"A" recordにIP Addressを設定しておいたけど、ある日突然表示されなくなったので驚いた。

 

< Related Posts >

2012年9月7日金曜日

PhoneGapとTitanium Mobileで揺れ動いて結局Titaniumにした

phonegap_vs_titanium本格的にAndroid, iOS Appの開発が始まりそうなので、PhoneGapかTitaniumのどちらを使うか迷ったときのMemo.

PhoneGapとTitaniumの比較は「PhoneGap Titanium Mobile」で検索すると良記事がたくさん出てくる。

いろいろ考えた結果Titanium Mobileでいこうと思う。以下理由。

  • node.jsも触ったことあるし、JavaScriptで大抵のことは理解出来る自信がある
  • PhoneGapに比べて細部までCustomizeできる
  • Android, iOSに対応していれば十分
  • 他のWindows Mobileとか対応する必要があるときはWeb Appにする
  • PhoneGapで出来ることは、今後Web App(HTML5)で出来るようになると思う

 

< Related Posts >

2012年9月6日木曜日

Android, iOSの標準BrowserでFile Upload出来るかどうか

android_iphone_file-uploadお客様に提案するときにAndroid, iOS(iPhone, iPad)向けのNative Appを作るか、Web Appにするか調査しているときのMemo.

個人的にはWeb Appでいきたい。理由は

  • 自分自身がWeb(PHP, HTML, JavaScript)の方が得意
  • 複数のPlatform開発をする場合、開発期間、テスト、運用管理など総体的に費用がかさみ予算に合わない
  • Android, iOSのAppを両方Maintenanceするのが面倒

 

しかし、Web Appで行くための最大の障害がこれ。

「標準ブラウザでファイルアップロード出来るかどうか」

調べてみると厳しい現実が。

 

Web App一筋で行くにはまだ環境が整っていない感じ。

やはりPhoneGapかTitanium Mobileが落とし所なのかな。。。

 

< Related Posts >

2012年9月5日水曜日

Xperia Active(ST17i)をAndroid 4.0にUpdate(ICS化)

update_icecream-sandwichいつの間にかXperia Active向けにAndorid 4.0 (Ice Cream Sandwich)が公式に配信されているのでUpdateしてみた。

やり方は簡単、Sony MobileのOfficial Siteから「PC Companion」というSoftwareをDownload、Installして更新するだけ。

 

気付いた点を箇条書き

その他変更点は下記Siteが分かりやすい。

 

安定性に不安があるけど、電池の持ちが良くなっただけでUpdateして良かったと思えてしまう。

 

< Related Posts >

2012年9月4日火曜日

IE8で互換表示されないようにMeta tagを設定する

ie8_capatibilityIE8を使っている人から「レイアウトが崩れるよ」と報告があったので調べてみた。

自動的に「互換表示(互換モード)」になっていたみたい。

この互換表示はServer側で指定することが出来るらしい。詳しくは下記Siteで。

指定する方法は3つ

  • DOCTYPE 宣言で指定する方法
  • META タグで使用する方法
  • HTTP レスポンス ヘッダーで指定する方法

META tagに記述するのが分かりやすい。IE8以上で表示して欲しいので、次のように設定。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8; IE=EmulateIE9">

 

IE6, IE7に完全対応しようとすると、確認作業や修正などで開発工数が一気に増える。IE6,7で表示が崩れないCSSの書き方は経験によるところが大きい。少なくともCSS Frameworkを利用して、Browser間の差異を気にしないで開発に注力できる環境は整えた方がいい。

今IE6, IE7がどれだけいるかは下記Siteを参考に。

Google Analyticsで今公開している日本のSiteを見てみても5%はいる感じ。

IE8も15%ぐらいいるので、早くHTML5 + CSS3で互換性を気にせずWeb Applicationを開発できる日が来て欲しい。

 

< Related Posts >

2012年9月3日月曜日

IE8以前で角丸を簡単にborder-radiusを使って実現するPIE.htc

border-radius_pie-htc今までは角丸のDesignは画像を使って表現していたけど、このLibraryを使えば他のCSS3対応Browserと同様にCSSだけで表現できる。

HTCはDynamic HTML (DHTML) Behaviorsと呼ばれるIE独自に実装された仕組み。中身はHTMLとJavaScript。IE全盛期の頃はTableのthをClickするだけで、昇順、降順に並び替えるhtcが流行った時期もある。詳しくは下記Siteで。

 

最近作ったteniteo.jpでも角丸部分はこのLibraryを使っている。

次のように絶対Pathとbackground-colorを指定しないと、うまいこと表示されなかった。

.corner {
    background: #fff;
    behavior: url(/wp-content/themes/hoge/_inc/PIE.htc);
}

画像を使わずborder-radiusとborder-colorで調整出来るので、とっても楽ちん。

Related Posts Plugin for WordPress, Blogger...

Blog Archives