カテゴリー
SugiBlog Webデザイナー・プログラマーのためのお役立ちTips

iOSでのフォームラベル

  • HTML
  • 2014-06-12 - 更新:2014-08-19

iOSではHTMLタグ<label>が認識されないようです。

フォームのラベルはユーザーにとって当たり前というほど役に立ちます。
ですが、PCやAndroidではラベルのクリックイベントが認識されるのに、iOSでは認識されません。

そこで、ラベル付けに一工夫することで解決することができます。

例えば、チェックボックスを例にしてやってみましょう。

<label onclick=""><input type="checkbox" name="test" value="1">チェック1</label>

または

<input type="checkbox" id="t2" value="2">
<label for="t2" onclick="">チェック2</label>

空のクリックイベントを入れているところがミソです。

そして<head>内に、以下のJavaScriptを記述します。

document.getElementByTagName("label").click(function(){});

これでiOSでもラベルのクリックイベントが認識されるようになります。

参考URL:
http://blog.bluearrowslab.com/smartphone/topicks/55/

,
1,396 views

座標から住所を取得 GoogleMapAPI Geocoder

GoogleMap APIを利用して、座標から住所を取得します。

まず、座標オブジェクトを作成します。

location = new google.maps.LatLng([latitude], [longitude]);

ジオコーダーオブジェクトのインスタンスを生成

geocoder = new google.maps.Geocoder();

google.maps.Geocoderクラスのgeocodeメソッドでリクエストを送信し、返ってきたレスポンスを処理するコールバック関数を指定します。
複数の答えが返ってくる場合があるので、結果は配列になっています。

返ってきた結果のフォーマット済の文字列を取得する例

if(geocoder)
{
    geocoder.geocode(
        {location: location},
        function(geo_result, geo_response)
        {
            if(geo_response == "OK") {

                var tmpadd = "";
                tmpadd = geo_result[0].formatted_address;

                alert("住所：" + tmpadd);

            } else {

                alert(geo_response + "\n\n変換できませんでした。");

            }
        }
    );
}

続きを読む…»

,
7,527 views

GoogleMap ズームコントロール/移動コントロール

navigationControlが廃止され、zoomControlとpanControlに分割されています。

Zoom Control
zoomControl: true,
zoomControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT, // TOP_RIGHT, LEFT_CENTER, RIGHT_CENTER, TOP_LEFT, BOTTOM_LEFT
    style: google.maps.ZoomControlStyle.DEFAULT     // DEFAULT, SMALL, LARGE
}

ZoomControlStyleはDEFAULTにしておくと表示サイズや端末に合わせて最適化してくれます。

Pan Control
panControl: true,
panControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT // TOP_RIGHT, LEFT_CENTER, RIGHT_CENTER, TOP_LEFT, BOTTOM_LEFT
}
,
2,038 views

WebViewを使ったハイブリッドアプリの作成 [Android]

  • Android
  • 2013-11-20 - 更新:2013-11-21

HTML5+JavaScriptを使ってスマホアプリを開発することもできます。
ネイティブとWebアプリの機能を兼ね備えた、俗にハイブリッドアプリと呼ばれるそうです。

ここで作成するのはハイブリッドというには簡単すぎるものですが、
触りとなるものです。

まず、メインとなるアクティビティを作成します。
サンプルですので、WebViewのみ表示するものとなっています。

public class SampleActivity extends Activity {

    private final int FC = ViewGroup.LayoutParams.FILL_PARENT;
    public static WebView web;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        LinearLayout linearLayout = new LinearLayout(this);
        linearLayout.setOrientation(1);

        setContentView(linearLayout);

        web = new WebView(this);
        linearLayout.addView(web, new LayoutParams(FC, FC));

        // JavaScriptを有効にする
        web.getSettings().setJavaScriptEnabled(true);

        // JavaScriptにAPIを追加する
        web.addJavascriptInterface(new JavaScriptObject(this), "myapi");

        // スクロールバーを非表示にする
        web.setHorizontalScrollBarEnabled(false);
        web.setVerticalScrollBarEnabled(false);

        // フォーカスを有効にする
        web.setFocusable(true);

        // assetsディレクトリに用意したHTMLを読み込み
        web.loadUrl("file:///android_asset/sample.html");
    }

}

29行目のフォーカスを有効にするというのはデフォルトで有効になっていますが、
敢えて明示的に有効にしています。
どういった場合に無効にするのかと言いますと、全画面表示のゲームを作成する場合等です。
無効にする場合は引数をfalseとします。

web.setFocusable(false);

更にその場合はスリープモードにしないようにもしておいたほうがよいでしょう。
onCreateの最後にでも記述しておきましょう。

// スリープモードにしないようにする
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);

次に、JavaScriptのAPIとなるクラスを作成します。 続きを読む…»

, , ,
7,275 views

ルート検索 最適経路

営業の仕事をしていると、複数の場所を効率よく回りたい、という要求が出てくるかと思います。
GoogleMap APIを利用すれば出発地点、到着地点、8ヶ所の経由地を指定し、効率よく回るルートを検索することができます。
所謂巡回セールスマン問題を踏まえた結果を返してくれます。
その際はリクエストプロパティの「optimizeWaypoints」にtrueを設定しておきます。

しかし、経由地8ヶ所以上の検索はできません。
費用が発生してよいならば、23ヶ所まで検索できるようです。
では、費用をかけずに8ヶ所以上検索したい場合はどうしたらよいでしょうか？

どうにか自前でできないかと色々調べました。
巡回セールスマン問題、組み合わせ最適化、パス表現法、ナップサック問題、欲張り法、遺伝的アルゴリズム等々。

巡回セールスマン問題、組み合わせ最適化を踏まえた最適ルートの検索で、何通りのルートを計測すればいいかと言いますと、以下の通り

n!/2n

nを10とすると(10×9×8×7×6×5×4×3×2×1)÷(2×10)で181,440通りとなります。

更にnが増加すると莫大な計算量になってしまうので、日常のプログラムとして使用するには
現実的ではありませんし、スーパーコンピューターでも100億年かかるという計算量になってしまいます。

…無理です。。。

何か打開策はないかと、物理の仕事（仕事率）も応用してみようと試みましたが、力(N)に当たるものが
ないので、比較する値としては単純な速さとなってしまうので最適な結果は得られず断念。

最終的に、遺伝的アルゴリズムを見ていると、ルートをランダムに作成するしかないのか、
という結論に至り、研究は終了しました。

というわけで、PHPとJavaScriptを使いプログラムを作成しました。

続きを読む…»

, , , , ,
8,888 views