SE奮闘記

iPhone, Android Appを設計するにあたり、Wireframeを作成するための素材を集めたときの覚書. 前の記事 で紹介したようにGoogle Docからtemplateを検索してもWireframeっぽいのが見つかる。 参考Site. WEB制作者必見。便利なワイヤーフレーム作成ツールまとめ｜designaholic -Creative Column- Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報*ホームページを作る人のネタ帳 下記SiteからiPhone, AndroidのUI ComponentがDownload出来る。 Android GUI PSD (High-Density) | Downloads | Teehan+Lax iPhone 4 GUI PSD (Retina Display) | Downloads | Teehan+Lax Blogspark | Blog Archive | Fireworks toolkit for creating iPhone UI mockups 結局、Fireworksを使って一からWireframeを書いた。Adobe Official Siteに作成方法があるので参考に。 Fireworks ヘルプ | Fireworks ページを使用した Web サイトとインターフェイスのプロトタイプの作成 このFireworks拡張機能はInstallしておくと便利かも。 数値入りアタリ画像を作成できるFireworks機能拡張 Placeholder | ブロックワークス Placeholder - Adobe Fireworks Extensions, Commands and Panels - johndunning.com     < Related Posts > Google Docsの図形描画を使って画面設計する(Wireframe)

Nginxの環境でサーバーメンテナンス中に「しばらくお待ちください。」のメッセージを表示する方法。 環境： CentOS 5.8, nginx 1.2.3 参考にしたのは下記Site. nginx: Create HTTP 503 Maintenance Custom Page nginxで特定ホスト以外からのアクセスをメンテナンス画面にする方法 (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 Wiki conf全体は以下のようになった。 server {     listen       80;     server_name  hoge.com;     root...

WordPressで作成されているSiteにFacebookに投稿されている写真を取得して表示するPluginを作成したときのMemo. 環境： PHP 5.3.15, WordPress 3.4.2, Facebook SDK for PHP 3.2.0 Facebook公式のPHP用SDKが公開されているのでこれを使うのが簡単。詳細は下記Siteで。 Facebook SDK for PHP - Facebook Developers facebook/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 Developers   json_decode した結果を返してくるので簡単便利。その他詳細はFacebook Developersで。 Graph API - Facebook Developers   < Related Posts > Facebook APIのOAuthで認証する WordpressからFacebook Fan...

あとあと役に立ちそうだったので覚書。 ウェブデザイナーに人気のある有料・無料のフォント ベスト10 | コリス 漢字も揃ってる、日本語のフリーフォントのまとめ -2011年版 | コリス 個人的にはAndroid 4.0から採用されたRobot Fontが小さくて見やすいので好き。Download, Installは下記Siteを参考に。 Roboto Font | Google's Android Font Typography | Android Developers   < Related Posts > TrueType, PostScriptなどFont関連用語とFont一覧表示 Windows用のフォントをMacで使えるか調査

JKA(Japan Karate Association) SingaporeのWeb site を作ったので、SEO対策も兼ねてGoogle Mapsで検索しても表示されるようにしてみた。 まず、Google WebmastersとGoogle Analyticsは導入してアクセス解析できるようにしておく。 Webmasters – Google Google アナリティクス公式サイト - ウェブ解析とレポート機能 – Google アナリティクス   Google Mapsに表示されるためにGoogle Placesから登録申請する Google Places 登録自体は無料。登録方法は下記Siteが分かりやすい。 Googleプレイスに無料で店舗を登録する方法ガイド (p.2) | Web担当者Forum Titleなどを入力するときは、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 Map   Google+ LocalとLink 今Google Mapに登録すると、Google+ localに自動で登録されるみたい。以前Google Placesを使っていた場合...

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.org Before You Create A Network | WordPress Codex ちなみに会員制Siteにするために Absolute Privacy や WP-Members というPluginもある。 下記Siteも参考に。 WordPressプラグイン「BuddyPress」でSNSサイトを作成 | Webクリエイターボックス オススメWordPressプラグイン（BuddyPress編） | SCREAMO CREATIVE   bp-defaultをCopyしてThemeを作成 BuddyPressのOfficial Documentでは、bp-defaultをCopyせずに継承して、必要なTemplate Fileだけ上書きするような"Child Theme"が推奨されている。詳しくは下記。 Building a Child Theme | BuddyPress Codex 私の場合は、この機能を利用せず一からThemeを作成。   ...

前の記事 で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までやってくれる。結構時間が掛かる。。。 起動するとこんな感じ。 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（サンプル）のスクリーンショット一覧

何回もInstall, Uninstallを繰り返したのでMemo. もう開発するときは大人しくOSX使って下さいという雰囲気を感じる。。。 環境： Windows 7 64bit 英語版 参考にしたのは下記Site. 1. Setting up your Native Development Environment - Documentation & Guides - Appcelerator Wiki 2. 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を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...

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

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

今までは角丸のDesignは画像を使って表現していたけど、このLibraryを使えば他のCSS3対応Browserと同様にCSSだけで表現できる。 CSS3 PIE: CSS3 decorations for IE HTCは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で調整出来るので、とっても楽ちん。