3月 15

Webの技術だけでiPhoneアプリを作る

未分類 コメントは受け付けていません。

Webの知識（HTML、CSS、Javascript）で流行のiPhoneアプリケーションを作る事が出来るんですねー。

わざわざObjective-cを学んだり、Mac買わなくても、

Webサイトじゃなくて、ちゃんとしたアプリケーションとして作って、App　Storeにも登録までをしっかり書いてある本です。

前置きの利点、欠点とかをちゃんと読んで、もし趣旨通りならトライしてみるのはいいかもしれません。

以下、本の冒頭より抜粋。（翻訳はけっこう適当英語です。）

原文はhttp://building-iphone-apps.labs.oreilly.com/index.htmlを読んでください。

本の全てが書かれています。

ちゃんとアプリを作る場合とWebアプリとして作る場合の利点と欠点

お互いのアプリケーションの作成にはそれぞれの要件があります。要件によってはWebアプリとして作成した方がちょうど良い場合もあるでしょうから、

それぞれの利点と欠点をよく知っておいた方がいいでしょう。

きちんとアプリをMac上でObjective-cを使って開発する利点：

  • Xcode, Interface Builder, and the Cocoa Touch framework などは優れた開発環境であることは確かでしょう。

  • App Storeが対応してくれるので、金儲けが楽です。

  • iPhoneの全てのデバイスをコントロールできます。

欠点:

  • 開発者になるだけで金払う必要があります。

  • アップルの承認プロセスが憎い。

  • Objective-Cという特殊な言語を（このiPhoneのためだけに！！）学ぶ必要がある。

  • Mac上でしか開発できない。

  • バグフィックスを即座に行う事が出来ない。

  • 開発サイクルはすご～くゆっくりで、テストについてもAppStoreの制限に制約されます。

Webアプリとして開発する利点:

  • Macだけでなくどの環境でも開発可能.

  • 現在の慣れ親しんだWeb技術・ツールを使って開発可能。

  • ブラウザを持つどんな端末でもアプリを実行できる.

  • バグフィックスを即座に対応できる。

  • 開発の進行は結構はやいでしょう。

Webアプリとして開発するデメリット:

  • iPhoneのハードウェアにアクセス制限がある。

  • もし金儲けしたいなら、そのアプリに支払いシステムを実装する必要がある。

  • ユーザーbインターフェースを通常のアプリほどに仕上げるのはちょっと難しい。

ところで、この本の中で書いてある、jQueryを用いたiPhoneのアプリケーションみたいな動きをするプラグインサンプルの掲載されている、
http://jqtouch.com/
は参考までに見ておくといいかもしれませんね。
使われるイメージとか非常に有用で、このページにあるサンプルは本当にiPhoneアプリケーションみたいな動きをします。

3月 02

symfonyでiframeブログパーツを作ってみた

未分類 コメントは受け付けていません。

ま、そんなに難しくないんですけど、
とりあえず、blog.jsとかファイル作ってweb/jsに置く。
その中で、URLパラメータを拾って以下みたいにかく。

document.write("<iframe src=\"http://symfony-php-jquery.jpn.org/blog/"
+ param.name + "\" width=\"150\" height=\"230\" style=\"border:none;padding:5px\"></iframe>");

http://symfony-php-jquery.jpn.org/blog/の部分はsymfonyのrouting.ymlと一致させること。

param.nameってのはurl表記のパラメーターを取得した変数が格納されていると思ってください。
詳しくはここなどを参照－＞http://css-eblog.com/javascript/js-param-get.html

で参照先アクションで、いつもと同じように書くだけ。

ブログパーツの配布時は

<script src=”http://symfony-php-jquery.jpn.org/js/blog.js?name=rfg84k5″></script>

みたいに書いておいて、自由に使ってね、って感じでいいと思います。

2月 23

JQueryとPrototype一緒に利用する。

未分類 コメントは受け付けていません。

一つのサイトでJQueryとPrototypeを一緒に利用することがあります。
普通１から作っている人には関係ないけどね。
symfonyはもともとPrototypeをサポートしているため、
自然にPrototypeを使う羽目になって、テンプレート制作者がJQuery愛好家で・・・ってことが十分にあり得ます。

でどこからのサイトからJQureyのソースを引っ張ってきて、コピペすると以下のようなエラーがJavascript上で出たりします。

$(document).ready is not a function

でそのやり方なんですが、備忘録的に以下。

まずjquery-1.3.2.min.jsなどJQueryライブラリを読み込み、その後に

var $j = jQuery.noConflict();

を<head>セクションに書き、その後全てのJQueryでの関数を$jで始めるように書き換えます。

例：
$(’#button_answer’).click(function() {
$(”#display_answer”).text(counter);
if(counter < 0){
$(”#display_answer”).addClass(”redtext”);
//// 以下続く

これを以下のようにします。

$j(’#button_answer’).click(function() {
$j(”#display_answer”).text(counter);
if(counter < 0){
$j(”#display_answer”).addClass(”redtext”);

2月 19

PHPでQRコードを生成する

未分類 コメントは受け付けていません。

スマートフォンが台頭してきた中でなぜ今更携帯案件・・・
とブツブツ言いたくなりますが、QRコード生成の事です。

詳しいことはITプロに書かれていますので、そちら読んで解決です。
http://itpro.nikkeibp.co.jp/article/COLUMN/20061110/253264/
タイトル通り１０分で全て解決です。

2月 19

住所からGoogleやYahooの地図を埋め込みで表示する方法

未分類 コメントは受け付けていません。

これはあまりうまいやり方ではないような気がしますが、
店舗などが掲載されているサイトなどで、YahooやGoogleなどの地図が埋め込みで表示されていますが、
あれのやり方を考えてみました。

まず、住所から緯度と経度を取得します。
参考にしたのはhttp://www.pahoo.org/e-soul/webtech/php06/php06-08-01.shtmとかで、
最初にGoogleMapsAPIのキーを取得します。
そしたらサンプル通りにやればいいのですが、以下のようなクラスを作成してみました。

googleGeocoding.class.php

class googleGeocoding
{

  public $items;

  public function setLocation($addr)
  {
    $query = mb_convert_encoding(htmlspecialchars($addr), 'UTF-8', 'auto');
    if (($n = $this->getPoints($query, &$items)) <= 0)
     {
       return NULL;
     }
       }

   public function getPoints($query, &$items)
  {
         $url = $this->getURL_GeoCoder($query);                         //リクエストURL
                //PHP5用; SimpleXML利用
              $response = simplexml_load_file($url);
                //レスポンス・チェック
                if (isset($response->Response->Status->code) != '200')  return FALSE;
                //検索結果取りだし
                $n = 1;
                foreach ($response->Response->Placemark as $element) {
                        $items[$n]['address'] = $element->address;
                        $geo = $element->Point->coordinates;
                        list($this->items[$n]['longitude'], $this->items[$n]['latitude']) = split(',', $geo);
                        $n++;
                }
        return ($n - 1);
  }

  public function getURL_GeoCoder($query)
  {
    //global $GoogleMapsID;
    $GoogleMapsID = 'あなたのGoogleMapsAPI';
    return "http://maps.google.com/maps/geo?key={$GoogleMapsID}&q=" . urlencode($query) . "&output=xml&ie=UTF8";
  }

  public function getLongitude()
  {
    return $this->items[1]['longitude'];
  }

  public function getLatitude()
  {
    return $this->items[1]['latitude'];
  }

}

呼び出し側からは

<?php

$geo = new googleGeocoding();
$geo->setLocation(住所情報);
$latitude = $geo->getLatitude();
$longitude = $geo->getLongitude();
?>

で緯度と経度が$latitude $longitude に入ります。

それを今度は埋め込みの地図に代入するだけなのですが、
以下は訳あってYahooの地図を利用しています。

<script type='text/javascript' charset='UTF-8' src="http://map.yahooapis.jp/
MapsService/embedmap/V2/?lat=<? echo $latitude ?>&amp;lon=<? echo $longitude ?>
&amp;z=18&amp;mode=map&amp;pointer=on&amp;datum=wgs&amp;fa=ks&amp;home=on
&amp;hlat=<? echo $latitude ?>&amp;hlon=<? echo $longitude ?>&amp;
ei=utf-8&amp;s=126638981855354c99c2fa81d900c39a0c5a2d4237&amp;width=480&amp;height=360"></script>


こんな感じの地図が表示されます。

また携帯向けのサイトなどで地図を画像で表示したい場合はGoogleAPIのシンプルなものがいいと思います。

<img src="http://maps.google.com/staticmap?center=<? echo $latitude ?>,<? echo $longitude ?>
&markers=<? echo $latitude ?>,<? echo $longitude ?>,red&zoom=17&size=240x180&key=あなたのAPIキー" />

size=のあとにサイズを入れることで、大きさの変更が可能です。
APIキーはご自身のものを利用してください。

まぁ他のサービスを利用しているに過ぎないので、
いつ仕様が変わるかわかりませんが、とりあえずコレで今のところOKだからよしとしよう。

2月 12

symfonyで携帯サイトを作る際に注意したこと。

未分類 コメントは受け付けていません。

今まで案件が無かったのですが、急に携帯サイトを作る話が浮上してきたので、
急いでチェック。

symfonyで携帯サイトを作る方法は、
まずphpの初心者でもわかる技術評論社のページは必ず全て目を通しておいた方がいいと思います。
http://gihyo.jp/dev/serial/01/mobilesite-php

携帯の実機が無くてもある程度のデバッグできる、FireMobileSimulatorは必須でしょう。

で次にsymfony特定の情報として、以下。

http://www.centsys.jp/service/technical_information/symfony/mobile_development.html

これを読んでそれなりに理解すれば必ず出来ると思います。
そんなに難しくないけど、エンコーディングについてはmyMobileFilterクラスのexecute()内にある以下2行の前に
　　　　　//出力をSJISに
mb_http_output(’SJIS’);
ob_start(”mb_output_handler”);
に以下を追加しないとダメでした。
mb_internal_encoding(”UTF-8″);

mb_internal_encodingがSJISだと問題ないのですが、
UTF-8だとEUCに誤認識してしまうらしい。
（php.iniの設定がautoで変換してしまっているらしい…）
明示的にmb_internal_encodingを指定してあげればOK。

あと、最後の携帯用とPC用のテンプレートの切り分けの最後に書いてあった、
module.ymlについては、少しなじみがない人はsymfonyのマニュアルを読めばなんとなくわかるのでは？
と思います。

補足までに一応３キャリアの情報です。
Docomo
AU
Softbank

1月 22

jQueryでIE5とIE6のpngの透過を実現させる。

未分類 コメントは受け付けていません。

http://jquery.andreaseberhard.de/pngFix/index.html

ここにプラグインがありました。
ちなみにこれをすでにあるサイトに導入すると、レイアウトとかがほぼの確立で壊れます。
開発途上に行うならまだしも、究極的に壊れるので、修復する気が萎えます

できないことはイメージをつかったボタンとかが表示できないとか色々制約があるようです。

1月 14

jQueryでアニメーションページスクロールを実装する

未分類 コメントは受け付けていません。

とあるページをスルスルっと動くリンクを作ります。
aタグでidを参照し、href=”#id名”などを利用しているページにはいいかもしれません。

参考にしたのはhttp://moto-mono.net/2009/05/18/page-scrolling-with-jqueryeasing.html
Easingプラグインというらしいです。

ページにあるサンプルを見ると、動くのがわかります。

※サンプルは動きませんが、IE6も対応しています。

動きにはいくつか種類があるので、jQuery日本語リファレンスのEasingプラグインを参考にするといいみたいです。

1月 12

jQueryでラジオボタン、チェックボックスの値を取得する方法

未分類 コメントは受け付けていません。


普段は $j(”#name”).val()のように取ってましたが、
チェックボックスとラジオボタンについては別の書き方が必要みたい。
以下、例

<form>
<input name=”id” type=”hidden” />
<select name=”pref”>
<option value=”1″>NY</option>
<option value=”2″>LA</option>
<option value=”3″>SF</option>
<option value=”4″>CH</option>
<option value=”5″>FL</option>
<option value=”6″>IN</option>
</select>

<input name=”color” type=”radio” value=”1″ />male

<input name=”color” type=”radio” value=”2″ />female

<input name=”color” type=”radio” value=”3″ />gay

<input name=”sex” type=”checkbox” value=”1″ />blue

<input name=”sex” type=”checkbox” value=”2″ />red

<input name=”sex” type=”checkbox” value=”3″ />green
</form>

上記フォームに対しては以下のように取得する。

<script type=”text/javascript”>
jQuery(function($){

/********************************************************
セレクトボクス
****************************************************** */
//↓gayにselected=”selected”された状態になる
$(”select[name=pref]“).val(['3']);

/********************************************************
ラジオボタン
****************************************************** */
//↓femaleにchecked=”checked”された状態になる
//valのカッコの中要注意
$(”input[name=color]“).val(['2'])

//チェックされた値の取得
//tmpにチェックされているvalueの値が取得できる
var tmp = $(”input[name=color]:checked”).val();

/********************************************************
チェックボックス
****************************************************** */
//blueにchecked=’checked’された状態にする
$(”input[name=sex]“).val(['1']);
//redとgreenをchecked=’checked’された状態にする
$(”input[name=sex]“).val(['2','3']);

//チェックされている値の取得
var tmp = $(”input[name=sex]“).val();

});

</script>

12月 24

TwitterのIDを利用してログイン＆投稿(OAuth)

未分類 コメントは受け付けていません。

流行りものには乗らないと。
Twitterのユーザーは世界中に数多くいて、最近のWebサイトで難しいのは「どうやってユーザーを獲得（登録させる）するか」という点なので、
ならばTwitterのユーザーだったらいきなりログインできて使えるよってのが望ましい。

どうやるかってことは詳しく解説されているサイトが
http://www.hosimitu.com/2009/11/2020-1358.php
にあったので、割愛。
現在2009年12月時点ではtwitterのOAuthはバージョン0.2.0-beta2だけど、
ここのサイトで紹介されているのは0.1.1なのでこれを使うように。

でないと私みたいにtwitterOAuth.phpが見つからなく先に進めないってことになったりします。
このへん詳細はコチラ

特にはまったりしたところはなく、スムーズに投稿出来ました。

ユーザーの情報とか取り出したい場合は、
$content = $to->OAuthRequest(’https://twitter.com/account/verify_credentials.xml’, array(), ‘GET’);
ここでxmlで取得してこれているので、その下にSimpleXMLElementでxmlを解析してやれば簡単。
なんかここでふと思うのですが、xmlをパースするとか言うみたいですが、
こんな一般的でない英語を使うのはどうかと思う今日この頃です。

Previous Entries
preload preload preload