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

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セクション）内に記述される必要があります。

,
8,504 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,262 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,882 views

ページのトップへスクロールする

現在のページのトップへスクロールする小技です。
jQueryを使って実装します。

JavaScriptライブラリをダウンロード
jQuery

まずheadタグ内でjQueryライブラリを読み込みます。

<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>

bodyタグにIDを付けます

<body id="top">

ID付のdivタグで括ってリンクを作成します。

<div id="to_pagetop">
    <a href="#top">上に戻る</a>
</div>

最後に任意の場所に以下のコードを記述します。 続きを読む…»

, ,
1,245 views

jQueryプラグイン Excolo-Slider

Excolo-Sliderはシンプルなスライドショーを実装してくれるプラグインです。
シンプルではありますが、オプションも多様に用意されていて、スマホのタッチ操作にも対応しているので
非常に使い勝手が良いです。

JavaScriptライブラリをダウンロード
jQuery
Excolo-Slider

headタグ内でダウンロードしたライブラリを読み込みます。

<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./excolo-slider/js/jquery.excoloSlider.js"></script>
<link rel="stylesheet" href="./excolo-slider/css/jquery.excoloSlider.css">

HTMLを用意します。

<div id="eslider" class="slider">
    <a href="#"><img src="./images/example1.gif" width="260" height="100" alt=""></a>
    <a href="#"><img src="./images/example2.gif" width="260" height="100" alt=""></a>
    <a href="#"><img src="./images/example3.gif" width="260" height="100" alt=""></a>
    <img src="./images/example4.gif" width="260" height="100" alt="">
</div>

続きを読む…»

, ,
1,696 views