カテゴリー
SugiBlog ホームページ制作・システム開発|大阪

リンクでGoogleMap地図アプリを起動する

リンクを貼って指定した場所をGoogleMapの地図アプリで表示させることができます。
スマートフォン対応サイトや、メールで正確な場所を送りたいときに便利です。

メールで送る場合はURL部分だけでOKです。

※与える座標は世界測地系(WGS84)です。

<a href="http://maps.google.com/maps?q=35.65860811863414,139.7455318066551">地図を表示</a>

上記だと座標が名称として表示されるので、任意に名称を指定したい場合は以下のようにします。

<a href="http://maps.google.com/maps?q=35.65860811863414,139.7455318066551+東京タワー">地図を

表示</a>

この記事がお役に立ちましたらシェアお願いします

9,356 views

iOSでのフォームラベル

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/

この記事がお役に立ちましたらシェアお願いします

621 views

カスタムフィールドを追加し、常に投稿画面に表示させる – WordPress

記事を新規投稿する際、プラグインを使用せずカスタムフィールドの入力欄をデフォルトで表示させる、という方法があったのでご紹介します。
自作のオリジナルテーマであることが前提です。

テーマのfunctions.phpに記述します。

admin_menuアクションフックでカスタムボックスを定義
(管理画面メニューの基本構造が配置された後に実行する)

add_action('admin_menu', 'add_custom_fields');

また、add_meta_boxesアクションフックでも可能なようです。
(投稿編集画面が読み込まれた際に実行する(バージョン3.0以降))

add_action('add_meta_boxes', 'add_custom_fields');

投稿画面にカスタムフィールドを表示するカスタムセクションを追加

function add_custom_fields() {
    add_meta_box('my_sectionid', 'カスタムフィールド', 'my_custom_fields', 'post');
}

固定ページ投稿画面に追加する場合は

add_meta_box('my_sectionid', 'カスタムフィールド', 'my_custom_fields', 'page');

add_meta_box関数について 続きを読む…»

この記事がお役に立ちましたらシェアお願いします

2,964 views

HTMLドキュメント互換モード IE8

Internet Explorer 8の互換モードについて。

IE7と同様の動作を行うようにするにはヘッダーに以下を記述します。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

同様に「IE5」「IE=8」と指定することで、他の互換モードを選択できます。
また、「IE=edge」と指定すれば、IE8に対して利用できる最も互換性の高いモードを使用するよう指示できます

X-UA-Compatibleヘッダーでは、大文字小文字が区別されません。
ただし、他のすべての要素よりも先に(TITLE要素と他のMETA要素は除く)、
Webページのヘッダー(HEADセクション)内に記述される必要があります。

この記事がお役に立ちましたらシェアお願いします

5,250 views

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

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となるクラスを作成します。 続きを読む…»

この記事がお役に立ちましたらシェアお願いします

5,268 views