投稿

9月, 2012の投稿を表示しています

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

イメージ

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

イメージ
Nginxの環境でサーバーメンテナンス中に「しばらくお待ちください。」のメッセージを表示する方法。環境: CentOS 5.8, nginx 1.2.3参考にしたのは下記Site.nginx: Create HTTP 503 Maintenance Custom Pagenginxで特定ホスト以外からのアクセスをメンテナンス画面にする方法 (2) - (ひ)メモ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を参考に。HttpRewriteModule | Nginx Wikiconf全体は以下のようになった。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 of…

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

イメージ
WordPressで作成されているSiteにFacebookに投稿されている写真を取得して表示するPluginを作成したときのMemo.環境: PHP 5.3.15, WordPress 3.4.2, Facebook SDK for PHP 3.2.0Facebook公式のPHP用SDKが公開されているのでこれを使うのが簡単。詳細は下記Siteで。Facebook SDK for PHP - Facebook Developersfacebook/facebook-php-sdk - github基本は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の指定方法は下記を参考に。Pagination - Facebook Developersjson_decodeした結果を返してくるので簡単便利。その他詳細はFacebook Developersで。Graph API - Facebook Developers< Related Posts >Facebook APIのOAuthで認証するWordpressからFacebook Fan Pageに自動で投稿したい【PHP】WordpressでPicasaの写真を表示(非公開のも)

Font選びで困ったときのための覚書

イメージ

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

イメージ
JKA(Japan Karate Association) SingaporeのWeb siteを作ったので、SEO対策も兼ねてGoogle Mapsで検索しても表示されるようにしてみた。まず、Google WebmastersとGoogle Analyticsは導入してアクセス解析できるようにしておく。Webmasters – GoogleGoogle アナリティクス公式サイト - ウェブ解析とレポート機能 – Google アナリティクスGoogle Mapsに表示されるためにGoogle Placesから登録申請するGoogle Places登録自体は無料。登録方法は下記Siteが分かりやすい。Googleプレイスに無料で店舗を登録する方法ガイド (p.2) | Web担当者ForumTitleなどを入力するときは、Official Blogを参考に分かりやすく品質ガイドラインに違反しないように気をつける。Google ウェブマスター向け公式ブログ: Google プレイスGoogle プレイス品質ガイドライン - ビジネスオーナー向けプレイス ヘルプちなみに登録したのは空手をやってる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を受け取れる人はそうした方が手っ取り早い。JKA Singapore on Google MapGoogle+ LocalとLink今Google Mapに登録すると、Google+ localに自動で登録されるみたい。以前Google Placesを使っていた場合は移行が必要(?)Google プレイスのコンテンツを Google+ ローカルに移動する - Google+ ヘルプ登録直後のGoogle+ Localの画面写真とかクチコミを入れてみた。JKA Singapore - Abo…

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

イメージ
WordPressをSNSにするPlugin"BuddyPress"をInstallして、会員制のCommunity Siteを構築しているときのMemo.環境: WordPress 3.3.2, BuddyPress 1.5.5個人的にはWordPressに慣れているので、本体に手を加えないでTheme、Pluginからhookして大体の事は実現できる自信がある。だけど最近はImpressCMSも人気があるCMSの一つなので、場合によってはこちらの方が簡単かもしれない。ちなみに作ったのはこちらのSite.teniteo[テニテオ] | ママによるママの為の子育て情報サイトBuddyPressの概要特別な設定なしでWordPressをSNS化するPlugin.以前はWordPressをMultisite(Network)化する必要があったけど、今はBuddyPress自体に会員認証(User Activation)機能を持つようになったので、使いやすくなった。BuddyPress.orgBefore You Create A Network | WordPress Codexちなみに会員制SiteにするためにAbsolute PrivacyWP-MembersというPluginもある。下記Siteも参考に。WordPressプラグイン「BuddyPress」でSNSサイトを作成 | WebクリエイターボックスオススメWordPressプラグイン(BuddyPress編) | SCREAMO CREATIVEbp-defaultをCopyしてThemeを作成BuddyPressのOfficial Documentでは、bp-defaultをCopyせずに継承して、必要なTemplate Fileだけ上書きするような"Child Theme"が推奨されている。詳しくは下記。Building a Child Theme | BuddyPress Codex私の場合は、この機能を利用せず一からThemeを作成。開発用ReferenceOfficial Siteにも簡単なReferenceがあるけど、詳細な解説まで記載されてない様子。BuddyPress Template Tags | BuddyPress CodexSource …

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

イメージ
前の記事で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 ProjectURIにGitHubのAddressを入力するhttps://github.com/appcelerator/KitchenSink.gitWorkspaceにDownload後、Project Explorerから「Run As」 → 「Android Emulator」を選択するとCompileからInstallまでやってくれる。結構時間が掛かる。。。起動するとこんな感じ。File, Folderの構成や考え方は「CommonJS」に基づいているらしい。(日本語)CommonJS Modules in Titanium - JP::HSJ::Junknews::HatenaSide(英語)CommonJS Modules in Titanium - Documentation - Guides - Appcelerator Wikiこれもやりながら覚える。< Related Post >Titanium Studioの開発環境をWindows 7に構築PhoneGapとTitanium Mobileで揺れ動いて結局TitaniumにしたiOS, Android開発をJavaScriptで行うTitanium Mobileを試す【iOS開発】Sample Code(サンプル)のスクリーンショット一覧

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

イメージ
何回もInstall, Uninstallを繰り返したのでMemo.もう開発するときは大人しくOSX使って下さいという雰囲気を感じる。。。環境: Windows 7 64bit 英語版参考にしたのは下記Site.1. Setting up your Native Development Environment - Documentation & Guides - Appcelerator Wiki2. Getting Started with Titanium Studio - Documentation & Guides - Appcelerator Wikiどうしても Titanium Studio 環境を windows 7 に 構築できない人へ - ちょこっとIっTぇみる事前準備と注意点既にJDKがInstallされていたら全部Uninstallして再起動する JDK 6(Java SE 6) x86(i586)をInstallする(7でもx64でもない) Android SDKをInstallする場所は空白を含まないPathにする 1. JDKをInstallJava SE 6 UpdateのDownloadを選択して「Windows x86」をDownloadしてInstall.Computerを右Click → Properties → Advanced system settings →Advanced → Environment VariablesSystem variablesのNew...をClickして環境変数を追加するVariable name: JAVA_HOME
Variable value: C:\Program Files (x86)\Java\jdk1.6.0_35環境変数PATHに次の値を追記(javacを実行出来るようにする)。;%JAVA_HOME%\bin2. Android SDKをInstallOfficial SiteからDownload, Install(installer_r20.0.3-windows.exe). Destination Folderは「C:\Android\android-sdk」Install後Android SDK Managerが立ち上がるので、「Androi…

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

イメージ
JKA SingaporeのWeb Siteを作ったときに、Singapore国内にServerがあって安いところはないものかと調べてみた。見つけたのはここ。Singapore Web Hosting - Singapore Host1年契約すれば月S$5(月額約315円)。Data転送量の制限とかないし、とりあえずHomepageを置いとくのはいいんじゃないかな。Share Serverなので、応答が返ってくるのが異様に遅いときがある。専用IP Addressにするには年間S$60追加で必要。Domainを別で管理している場合は、Name ServerをSingapore Hostが提供しているのに変更すれば、専用IP Addressを取得しなくても大丈夫。FAQにも書いてある。Web Hosting FAQ - Singapore HostName Serverは登録後Supportに問い合わせると教えてくれる。ちなみにDomainは下記で管理している。Only Domains - Global Domain Name Registrar当初は固定IPだと思って"A" recordにIP Addressを設定しておいたけど、ある日突然表示されなくなったので驚いた。< Related Posts >SingaporeのDomain「.sg」をOnly Domainsで取得する

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

イメージ
本格的にAndroid, iOS Appの開発が始まりそうなので、PhoneGapかTitaniumのどちらを使うか迷ったときのMemo.PhoneGapとTitaniumの比較は「PhoneGap Titanium Mobile」で検索すると良記事がたくさん出てくる。Appceleratorの開発者が語るTitaniumとPhoneGapの比較 | A-Listersいろいろ考えた結果Titanium Mobileでいこうと思う。以下理由。node.jsも触ったことあるし、JavaScriptで大抵のことは理解出来る自信がある PhoneGapに比べて細部までCustomizeできる Android, iOSに対応していれば十分 他のWindows Mobileとか対応する必要があるときはWeb Appにする PhoneGapで出来ることは、今後Web App(HTML5)で出来るようになると思う < Related Posts >Android, iOSの標準BrowserでFile Upload出来るかどうかiOS, Android開発をJavaScriptで行うTitanium Mobileを試す【iOS開発】JavaScript, HTML, CSSでiPhone, iPadアプリ開発

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

イメージ
お客様に提案するときにAndroid, iOS(iPhone, iPad)向けのNative Appを作るか、Web Appにするか調査しているときのMemo.個人的にはWeb Appでいきたい。理由は自分自身がWeb(PHP, HTML, JavaScript)の方が得意 複数のPlatform開発をする場合、開発期間、テスト、運用管理など総体的に費用がかさみ予算に合わない Android, iOSのAppを両方Maintenanceするのが面倒 しかし、Web Appで行くための最大の障害がこれ。「標準ブラウザでファイルアップロード出来るかどうか」調べてみると厳しい現実が。Android端末によって出来るのと出来ないのがあるらしい docomo公式には「出来ない」とある(参考:Android(TM)向けWebサイト構築 | サービス・機能 | NTTドコモ) iOS(iPhone, iPad)の場合現状出来ないが2012年秋登場の「iOS6」で可能になるらしい Web App一筋で行くにはまだ環境が整っていない感じ。やはりPhoneGapかTitanium Mobileが落とし所なのかな。。。< Related Posts >[Titanium Mobile] ModuleをInstallする方法iOS, Android開発をJavaScriptで行うTitanium Mobileを試す【iOS開発】JavaScript, HTML, CSSでiPhone, iPadアプリ開発

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

イメージ
いつの間にかXperia Active向けにAndorid 4.0 (Ice Cream Sandwich)が公式に配信されているのでUpdateしてみた。やり方は簡単、Sony MobileのOfficial Siteから「PC Companion」というSoftwareをDownload、Installして更新するだけ。Xperia™ active - Sony Smartphones (UK)Download for PC - Sony Smartphones (UK)気付いた点を箇条書き電池の持ちが明らかに良くなった HOME画面をCustomize出来るApex Launcherが便利 Wi-fiから切断される現象が発生(参考:Xperia、Android 4.0へのアップグレードでトラブル発生 | スラッシュドット・ジャパン)。 Google Chromeは容量が大きすぎるので削除 Appがたまに「応答なし」になる(Memoryが足りない?) Robot Fontが見やすい(参考:Typography | Android Developers) Lock画面を解除するときのPattern入力が簡単 その他変更点は下記Siteが分かりやすい。XperiaにおけるAndroidアプリ考察 &raquo; 【コラム】なぜICSにこだわるのか。(非公式ver.upする理由)安定性に不安があるけど、電池の持ちが良くなっただけでUpdateして良かったと思えてしまう。< Related Posts >Android携帯Xperia Active 初期設定Android携帯Sony Ericsson製Xperia ActiveをM1 Shopで買った

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

イメージ
IE8を使っている人から「レイアウトが崩れるよ」と報告があったので調べてみた。自動的に「互換表示(互換モード)」になっていたみたい。この互換表示はServer側で指定することが出来るらしい。詳しくは下記Siteで。IE8互換モードについて - Japan IE Support Team Blog - Site Home - TechNet BlogsInternet Explorer 9正式版レビュー - @IT指定する方法は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を参考に。[NETMARKETSHARE] Browser market shareGoogle Analyticsで今公開している日本のSiteを見てみても5%はいる感じ。IE8も15%ぐらいいるので、早くHTML5 + CSS3で互換性を気にせずWeb Applicationを開発できる日が来て欲しい。< Related Posts >IE8以前で角丸を簡単にborder-radiusを使って実現するPIE.htcTwitter製CSS Framework "Bootstrap"が良さそうHTML5 + CSS3に対応したFramework「52framework」CSS Framework「YAML」

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

イメージ
今までは角丸のDesignは画像を使って表現していたけど、このLibraryを使えば他のCSS3対応Browserと同様にCSSだけで表現できる。CSS3 PIE: CSS3 decorations for IEHTCはDynamic HTML (DHTML) Behaviorsと呼ばれるIE独自に実装された仕組み。中身はHTMLとJavaScript。IE全盛期の頃はTableのthをClickするだけで、昇順、降順に並び替えるhtcが流行った時期もある。詳しくは下記Siteで。HTML Components を使った DHTML Behaviors のスクリプトによる実装最近作ったteniteo.jpでも角丸部分はこのLibraryを使っている。teniteo[テニテオ]次のように絶対Pathとbackground-colorを指定しないと、うまいこと表示されなかった。.corner {
    background: #fff;
    behavior: url(/wp-content/themes/hoge/_inc/PIE.htc);
}画像を使わずborder-radiusとborder-colorで調整出来るので、とっても楽ちん。