PhoneGapでiPhoneアプリのアイコン反射を止める

PhoneGapに限った事じゃ無さそうですが、初期状態だとiPhoneアプリのアイコンに勝手に光沢が入ります↓

こいつを何とかしたいと思ってネットを駆け巡ったらStack Overflowで見つかったのでメモしておきます。

また、アイコンの制作には以下のPhotoshopテンプレートとアクションを使いました。これすげー便利。

http://appicontemplate.com

【PhoneGapでアイコンの光沢を無効にする】

PhoneGapのプロジェクトディレクトリにある「xxx-info.plist(xxxにはプロジェクト名が入る)」に以下の記述を追加。

<key>UIPrerenderedIcon</key>
<string>true</string>

Xcodeでplistを開いた場合は以下の記述を追加すれば良いらしい。

 Icon already inculdes gloss effect  ※YESにセット

こんな感じ↓

これで行けるかと思い気やどうやらiOS5以上だと?駄目らしい。Xcodeでビルドする際にTARGETSのSummaryタブで「Prerendered」という部分にチェックを入れる必要があるようです。(もしかしたらこれだけでも良いのかもしれない)

スクリーンショット 2013-07-16 22.22.55

この状態でビルドすればアイコンに光沢が表示されません↓

【参考】

Icon already includes gloss effects – Stack Overflow

お願いだから輝かないでくれ!!! | MOL

PhoneGapでiOSのソフトウェアキーボード上のDoneボタン等を日本語化する

PhoneGapの日本語Googleグループに同様の質問があったので私なりに調べた対応方法を記載しておきました。

ソフトキーボードの日本語表示 –
PhoneGapファン (phonegap-fan.jp)

【対応方法】

以下の図のように言語環境設定が日本語であるにもかかわらず英語表記になっている。

これを日本語に変えるにはプロジェクトディレクトリ内の「xxx-info.plist」に以下の記述を追加すれば良いらしい。

<key>CFBundleAllowMixedLocalizations</key>
<string>true</string>

上記の設定を追加するとiPhoneの言語環境に合わせて文字列の表示が変わるので、日本語環境で利用しているiOSでは日本語表記のものに変わる模様。

【参考】

Change the language of iOS virtual keyboard “previous”, “next”, “done” buttons – Stack Overflow

PhoneGapで画面を固定化する

PhoneGapで制作していて速攻で気になるのが画面のスクロール。以下の図の様に画面の上下が画面外にスクロールできる。

スクロール

これを固定化するにはどうすれば良いかというと、Stack Overflow に対応方法が載っていた。

Phonegap vertical scroll – Stack Overflow

・CSSの追加

念のためCSSに以下の記述を追加。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

・metaタグのviewportを変更

viewportを以下の様に変更する。

<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />

・config.xmlを変更

プロジェクトディレクトリ内にある「config.xml」を開き、DisallowOverscrollをtrueに書き換える。

<preference name="DisallowOverscroll" value="true" />

以上で画面外にスクロールできないようになる。

PhoneGapでiPhoneアプリ開発②

開発するアプリの概要

PhoneGapの開発環境が整ったので早速アプリの開発を開始する。なるべく簡単に作れそうなアプリが良いため、巷にあふれてる「カラーコード変換」アプリを作成する事にした。以下はその概要図。

(さらに…)

PhoneGapでiPhoneアプリ開発①

PhoneGapをいじってみたくなったのでまず開発環境の構築を行った。以下はそのメモ。(前提条件としてxcodeとCommand Line Toolsは既にインストール済)

(さらに…)

ムードボードっぽいものを簡単に作れる感じのWebサービス「Mood Board Creator」

全体的に大分眠たいデザインになってますが、ある程度形が固まったと言っても過言ではない為公開します。ユーザー認証は設けてませんが、作成したムードボードの保存やPDF出力などが可能です。IEには対応していません。

Mood Board Creator

【ムードボードってなに?】
別名としてはイメージボードとか言うらしいのですが、何かをデザインする際に言語化しにくいイメージ(超クールでキラキラしててすげえかっこいいみたいな)を共同するメンバーなどに伝えるために作成するスクラップ集のようなものです。
これまでそんなものは全く作った事が無かったので存在自体知りませんでしたが、最近になってようやく実物に近いものをクライアントから頂いた資料で見る事が出来ました。やはり使う人は使うらしい。

【なにができるの?】
以下のような単純なムードボードっぽいものが作れます。(画像をクリックするとデモ画面に移動)

【制作の経緯】
10月末頃に某マッシュアップアワード用に何か作りたいなと思ってたところ、半年くらい前に某氏より聞いたムードボードを思い出し、3日くらいあれば作れるだろうと思ってたら全然終わらず、そのままズルズルと制作を継続してようやくなんとなく形になったという次第です。

本当は自動保存機能や透過pngでの出力、テキストボックの追加機能なども付けようと思ってましたが、やる気がなくなったので一旦これで区切る事にして、気が向いたら機能を拡充しようと思います。

【さくらのVPS】php-mbstringのインストール

WordPressの「WP Multibyte Patch」プラグインを動作しようとしたところ、「お使いの WP Multibyte Patch を有効にするには、PHP の mbstring 関数が必要です。」というエラーメッセージが表示されたため、以下のコマンドで「php-mbstring」をインストール…

sudo yum install php-mbstring

しようとしたら出来なかった。

検索したところ、remiリポジトリを有効にすればインストール出来るらしいと判明。
そういえばCentOS6.2の標準リポジトリにphp5.3.xが含まれてなかったのでremiからインストールしてた。

参考:Install PEAR Mail/Mime Dependency issues in pure EPEL installation

以下のコマンドで再実行。

sudo yum --enablerepo=remi install php-mbstring
...

Warning: RPMDB altered outside of yum.
  Installing : php-mbstring-5.3.12-1.el6.remi.x86_64                                                           1/1 

Installed:
  php-mbstring.x86_64 0:5.3.12-1.el6.remi                                                                          

Complete!

なんかWarning!が出てるがインストール出来たらしい。
以下のコマンドでApacheを再起動し、Webサーバを最新の状態に更新する。

sudo /etc/rc.d/init.d/httpd restart

再度プラグインを確認したところ、今度は正常に有効化できた。

Google Analyticator が復活!しかし設定画面が表示されないバグ(?)が発生

※Google Analyticator v6.3.3のバージョンアップにより、この記事は陳腐化しています。(2012.09.18)

以前のエントリーで少しだけ触れましたが「Google Analyticator」という管理画面のダッシュボードにGoogle Analyticsの簡易的なアクセス解析結果を表示出来るプラグインがあるのですが、GoogleのAPI更新に伴って、簡易的なアクセス解析が表示されないという問題が発生していました。

作者のRonaldさんは既に開発終了宣言を出していたため、個々人でなんとかするか、引き継いでくれる人にまかせるかといった状態でしたが、、、この度、なんとアップデートしてくたようです!素晴らしい!

が、私の環境(WordPress v3.4.2)では若干問題が発生。

なんらかのプラグインと競合しているのか、あるいはバグ(?)なのか、最新版にアップデート後、一旦、Googleの認証をリセットしないといけないようなのですが、どうやらパスの指定?がおかしいらしく「WordPressのアドレス」ではなく「サイトのアドレス」になっているため、プラグインのresetメニューからでは正常なページに飛びませんでした。(404が帰ってきます)

私の環境限定かもしれませんし、バグだとすれば恐らアップデートがかかるとのではないかと思うのでそれを待った方が良いと思います。

追記(2012/09/16):
問題を把握してくれているようなので素直に待った方が良いでしょう。
Broken if WordPress is installed in a sub-directory

ただ、まったく推奨しませんが、仮に症状が同じで待ってられないという方は以下の方法を試せば何とかなるかもしれません。

※FirefoxであればFirebug、Chromeであればデベロッパーツールなど、リアルタイムでコード編集が可能なツールが必要です。(別の方法もありますが) (さらに…)

【防備録】node.jsでnode-http-proxyを使ってApacheとの共存環境を作ったのでメモ

 

※あまりテキトーな事書くのもどうかと思いますが動いたのでメモしておきます。

 

 

【概要】

WebSocketを使ったサービスが作りたくなり、どうせなら前から気になってたnode.jsを使おうと思い立ったわけですが、既存のホスティング環境(さくらのVPS)にはApacheが走っているため、そのまま使おうとすると「http://example.com:8124」とかポート番号直打ちになるため、ちょっとカッコ悪いという問題が発生。(80番ではApacheが走ってるのでnodeが動かせない。)

 

そのため、なんか方法は無いものかと調べたら以下の素敵なスライドを発見。

 

Node.js勉強会@関西 第0回 Node.jsでつくるリバースプロキシ

 

node製の「node-http-proxy」というこれまた素敵なものがあるらしく、これを使えばリバースプロキシが簡単に作れるらしい。

 

ただ既存の環境ではApacheにバーチャルホストを設定してるので、そのままやっちゃっていいものなのか、いまいち良く分からない。

 

そのため、さらに検索したところ、なにやら凄く分かり易いサンプルを発見。

 

Reverse HTTP Proxy (Apache + nodejs)

 

正にこれだ!ということで早速、実装に取りかかる事に。

 

 

【目的】

現在、ポート80番で動いているApacheを「8080番」で動作するように変更し、node-http-proxyを使ったリバースプロキシを「80番」動作させて、各ドメインごとにApacheで処理するか、nodeで処理するかを自動的に振り分けるようにします。

 

 

【やった事メモ】

※以下、既にnode.jsはインストール済みという前提で進めます。環境はCentOS6.2です。

 

  1. 何はともあれnode-http-proxyのインストールを行います。

    npm install -g http-proxy
    npm link http-proxy
    
  2. サーバの適当な場所に上記の参考先を元にしてリバースプロキシのjsファイルを作成。

    [proxy.js]

    var httpProxy = require('/path/to/node_modules/http-proxy');
    //※本当はフルパスで読み込まなくてもいいはずです
    
    var options = {
      hostnameOnly: true,
      router: {
        'example1.com': '127.0.0.1:8080',
        'example2.com':'127.0.0.1:8080'
      }
    };
    var proxyServer = httpProxy.createServer(options);
    proxyServer.listen(80);
    console.log('It Works!');
    

    ※http-proxyの呼び出しがフルパスなのは -g を付けてインストールしたにも関わらず、私の環境ではNODE_PATHが通ってないらしく、良く分からなかったのでフルパスで書きました。通常はフルパスの必要はありません。

  3. Apacheのポートをこれまでの「80番」から「8080番」に変更。当然、そのままではサイトに繋がらなくなるので、既にApacheで何か動かしてる人は注意して下さい。
    以下、設定例。

    [/etc/httpd/conf/httpd.conf]

    Listen 8080
    
    NameVirtualHost *:8080
    
    <VirtualHost *:8080> 
      DocumentRoot /path/
      ServerName www.example1.com
      ServerAlias example1.com *.example1.com
    </VirtualHost>
    
    <VirtualHost *:8080>
      DocumentRoot /path/
      ServerName www.example2.com
      ServerAlias example2.com *.example2.com
    </VirtualHost> 
    

    コンフィグの修正が完了したら構文確認後、Apacheを再起動、またはコンフィグをリロードします。

    /usr/sbin/apachectl -t
    /etc/init.d/httpd restart
    

    この時点で一旦、80番で繋がらなくなります。

  4. 先ほど作ったリバースプロキシ(proxy.js)を動かします。

    node proxy.js
    

    動いた!・・・と思いきやエラーが発生。

    Error: listen EACCES
    

    どうやら80番で動かすにはsudoでやらないといけないらしい。再度実行すると今度は無事に動いた。

    sudo node proxy.js
    

    上手くいっていれば、この状態でバーチャルホストに設定されたドメインにアクセスするとこれまで通りちゃんとレスポンスが帰ってきます。上手くいかない場合はリバースプロキシの設定とApacheの設定をもう一度見直して下さい。

  5. さて、動いたのは良いのですが、このままの状態だとコンソールに「It Works!」と表示されたままで他の作業が出来なくなります。Macのターミナルなら標準でタブが付いてるので大した問題でもないのかもしれませんが、素人に毛が生えた程度の私くらいのレベルだともはやこの世の終わりに近い状態です。

    というかnode.jsには「forever」というnode.jsで作成したプログラムを永続化し、デーモンとして管理できるパッケージがあるのでそれを使えば話は早いのですが、今回のリバースプロキシは「80番」という特権ポートで動かしているためか、どうやらforeverでデーモンにする事ができないらしい???

    じゃあどうするのかというとコマンドの最後に「&」を付けてコントロールを奪われないようにします。

    sudo node proxy.js &
    

    こうするとバックグラウンドでプロセスが動き続けるので、リバースプロキシを動作させた後もコンソールのコントロールを奪われる事無く、色々と作業を継続出来ます。ただ、この方法は色々と突っ込みどころが多そうなので、詳しい人はデーモンにする詳しい方法とか教えてもらえると助かります。

    参考リンク:

    nodeのアプリをport80で動かす
    ログアウトした後もコマンドを実行し続ける方法

  6. これで一通りの目的は達成出来たため、後はnode.jsでガリガリとアプリを開発して適当なポートで動作させ、proxy.jsに動作しているnode製アプリの記述を加えてやれば、特定のドメインでアクセスした時にnodeのアプリが動くようになります。
    ただ、proxy.jsは最低限の記述となっているので以下のコードを参考にもう少しまともなリバースプロキシにした方が良さそうです。今だとhttpsとかで接続しても繋がらないんじゃないかと思います。
    参考:
    node-http-proxyを使ったいわゆるバーチャルホスト対応Webサーバー

    以上。

今さら気付いた事

いつの間にかGoogleのキャッシュ表示にMacのコマンドキーの説明が追加されていた。

後、WordPressの「Google Analyticator」というダッシュボードにGoogle Analyticsの簡易的なアクセス解析結果を表示出来るプラグインがあるんですが、APIの仕様変更に伴って動かなくなってます。

 

フォーラムを見ると作者の方は大分前に開発終了宣言を出してて、誰か何とかしてくれ状態。

Dashboard widget no longer authenticates

 

最後の投稿に「MailChimp’s Analytics360」というプラグインを試してみろと載ってる。

 

過去に何件かお客さんに納品済みのものがあるんだけど、どうしたものかな。

 

Pages: Prev 1 2 3 4 5 6 Next
IT起業アカデミア