SE奮闘記

AlloyのInstallまでは前の記事を参考に。参考になるDocumentが少ないので GitHubのREADME.mdに書いてあるSample Test Apps を動かしたときの覚書。 環境： Mac OS X 10.8.2, Xcode 4.5, Titanium Studio 2.1.2, Titanium SDK 2.1.3.GA, node.js 0.8.11   jakeとは jakeはJavaScript用のビルドツール。node.js上で動く。記述されたルールに従って環境に合わせた作業を自動的に行なってくれる。GNU makeと似てる。詳しくは下記。 Intro to Jake - JavaScript build tool for Node.js - How To Node - NodeJS make - Wikipedia 例えば下記Siteでは、UglifyJSとJakeを利用して、 「複数あるJavaScriptファイルの依存関係を解決しながら圧縮（Compile）する」 作業を自動化するjakefileを公開している。 Casey Banner - Minifying Javascript with Jake and UglifyJS Google Closure Libraryと何が違うんだ？と思って調べたのでメモ。 Closure Compiler Java上で動くJavScriptファイルを最適化（圧縮）するツール UglifyJS node.js上で動くJavScriptファイルを最適化（圧縮）するツール jake node.js上で動くビルドツール   Install jake npm経由でInstallして確認。npmのInstallは 前の記事 を参考に。 $ sudo npm install -g jake $ jake -v version 0.4.1がInstallされた。   Execute Sample A...

FacebookのComments PluginをWeb Siteの各記事に埋め込むと実際コメントがあったときに見落としてしまうので、一括で一覧表示・管理できないものかと調べたら、既にOfficial Toolがありました。 Comment Moderation Tool - Facebook Developers 以下登録方法。 参考にしたのは下記Site. Comments - Facebook Developers Facebook Social Plugins: Add Comments to your Website. by: Albert Bodamer. www.bodamer.com まずは Facebook developersから新規App作成。 Apps → Create New App 名前は適当に。App IDを取得する。 これをWeb Siteのhead内に埋め込む。 <meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/> これを埋め込んだ以降のコメントしか管理できない ので注意。試しに記事にコメントして Comment Moderation Tools を表示してみる。   < Related Posts > FacebookのGraph APIを使ってPAGEのAlbum一覧を取得するWordPress Pluginを公開 【PHP】Facebook Graph APIを使ってFacebook内の情報を取得する Facebook, Twitter, Google+のShare Buttonを設置する方法 Bloggerにfacebook用のOpen Graphを設置

Serverの設定を変更しながら、お手軽に表示速度を調査する方法がないものかと調べたときの覚書。 一番簡単なのがGoogle ChromeのDeveloper Toolsを使った方法。 "Network"の下帯にDOMContentLoaded（DOMの読み込み完了）とonload（画像も含め読み込み完了）の時間が表示されるので分かりやすい。 より詳細に分析したい場合は下記のようなChrome Extensions(Plugin)を使うと便利。 PageSpeed Insigts Google製。 Web版 もある。100点満点中の何点かをScoreで表示してくれる。 Speed Tracer Google製。タブを監視してJavaScript, CSSの挙動を表示してくれる。Developer Toolsより詳細情報が欲しいときに。 YSlow Yahoo製。表示速度最適化に必要な項目をチェックしてくれる。   < Related Posts > JavaScriptを圧縮、最適化するGoogleのツール 【PHP】知っておくとためになるPHPコーディングのTips

Titanium Studioを使って開発する際に、MVC Frameworkの「Alloy」がnode.jsの環境が必要なので、MacPortsからInstallしてみた。 環境： Mac mini OS X 10.8.2(Mountain Lion), MacPorts 2.1.2, node.js 0.8.11 参考にしたSite. Mountain Lion で MacPorts の更新 - j-mason's diary Alloy, from Appcelerator   < 2014/01/13 Modified > MacPortsを使わなくてもNVMを利用した方が管理しやすい。詳しくは下記。 SE奮闘記: nginx + node.js + pm2でアプリ向けのREST API環境を構築 creationix/nvm · GitHub   Install MacPorts XcodeがInstallしてある前提。MacPortsがXcodeのCommand Line Toolsを使うらしいので Xcode -> Preferences -> Downloads からCommand Line ToolsをInstallする。 MacPortsのpkgをOfficial SiteからDownload. pkgをDouble ClickしてInstall. The MacPorts Project -- Download & Installation MacPorts Download pkg一覧への直Link Install後は一回Logoutするとport commendを使えるようになる。 $ sudo port selfupdate   Install node.js & npm & Alloy Terminalから $ sudo port install nodejs 確認 $ node -v 今度はnpm $ sudo port install npm 確認 $ npm -v version 1.1.62がInstallされた。 今度はAlloy $ sudo npm install alloy ...

MacにTitanium StudioをInstallした後にAndroid SDKがないことに気づいて導入、設定したときの覚書。 環境： Mac OS X 10.8.2(Mountain Lion), Titanium Studio 2.1.2 参考にしたSite. Titanium Studio導入～Mac OS X編～ - 日本Androidの会新潟支部   Download & Install Android SDK Android DevelopersからMac用SDK InstallerをDownload. Android SDK | Android Developers 解凍後"Applications"に配置。 android-sdk-macosx/tools/android を実行。Double Clickで実行すると "android" can't be opened because it is from an unidentified developer と怒られるので、右Click -> Open 下記をDownloadする Android SDK Platform-tools Android 2.3.3 (API 10) Android 2.2 (API 8)   Titanium Studioの設定 Titanium Studio -> Preference -> Titanium Studio -> Titanium Android SDK Home: /Applications/android-sdk-macosx Default Android SDK: Google APIs Android 2.2   < Related Posts > Titanium Studioの開発環境をWindows 7に構築 iOS, Android開発をJavaScriptで行うTitanium Mobileを試す Androidの開発環境を整える。...

WordPressで作成したJKA SingaporeのWebsite。他の人でも簡単に写真をUpload出来るようにFacebook PageのAlbumを表示するようなPluginを開発した。 どんな感じになるかはこちら。 Gallery | Japan Karate Association | Singapore Branch Japan Karate Association - Singapore Branch ちなみにその前は Picasa Web Album と同期する自作Pluginを使ってた。 内部で使ってるFacebook Graph APIについては 前の記事 を参考に。 今はまだ取得結果を配列で返すだけなので、Themeの中でLoopしながらHTMLを記述しないといけない。時間があったらPHP, HTML, JavaScriptの知識がなくても導入できるようにするつもり。 WordPress.org でも検索できるように登録してみた。 Facebook Page Albums | WordPress Plugins 登録の仕方は下記Official Siteで。 Developer Center | WordPress   似たようなPluginは 「Facebook Photo」で検索 するといろいろ出てくる。ThemeをCustomize出来ない人はそっちを使った方がいいかも。   < Related Posts > 【PHP】Facebook Graph APIを使ってFacebook内の情報を取得する 【PHP】WordpressでPicasaの写真を表示（非公開のも）

社内のStrategy Meetingのために調べたことを覚書。   Passbookの概要 iOS6から標準アプリとして搭載。お店のクーポン、ポイントカードなどを一元管理して、必要なときにお知らせしてくれる。 Passbook。一つで搭乗券にも、お店のカードにも、クーポンになります。 | アップル - iOS 6   機能について 必要な情報は公式Apple Developer Siteから（英語）。 Passbook for Developers - Apple Developer 下記表は主に「 Getting Started with Passbook on iOS 6 」から抜粋 Passbookに登録できるPassは主に4 + 1種類 Pass形式 概要 搭乗券（Boarding Pass） 飛行機や電車などで利用 クーポン（Coupon） プロモーション商品などの割引 チケット（Event Ticket） 特定の日時場所で行われるイベントの案内を提供 お店カード（Store Card） お店やクラブなどで会員の情報を表示。ポイントカード、金券など。 その他（Generic） 上記以外。会員カードなど。   User側が便利に思うこと 位置情報を登録しておくことで、近くに来たら通知してくれる。 日時や場所が変わっても自動更新・通知される（飛行機の搭乗口変更など） 会員カード、搭乗券、クーポンを一元管理できる。 配布（お店）側が出来ること プッシュ形式の通知をiPhoneに送ることが出来る。 → やろうと思えばNews Letterみたいなことも出来る → Passに変更がないのに通知を送っちゃダメってGuidelineには書いてある 会員管理、クーポンの利用率など統計...

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...