カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

配列をランダムに並べ替える

  • PHP
  • 2013-10-02

PHPではshuffle関数を使って、配列の値をランダムに並べ替えることができます。

例として1から15の配列を作成し、配列の要素数だけ繰り返しランダムに並べ替えたものを表示しています。

<?php

$num_list = range(1, 15);

$n = count($num_list);

for($i = 0; $i < $n; $i++) {
    shuffle($num_list);
    echo @implode(", ", $num_list)."<br>";
}

?>

実行した結果がこちら
random_array

,
1,095 views

GoogleMapで距離計測（v3）

Google Maps Javascript APIを利用して2点間の距離と、移動にかかる所要時間を計測します。
計測にはgoogle.maps.DirectionsServiceクラスを使用します。
基本はGoogleMap ルート検索と同じです。

リクエスト用のプロパティクラスを作成します。

var request = {
    origin: null,      //出発地点のLatLngオブジェクト
    destination: null, //到着地点のLatLngオブジェクト

    //DRIVING=自動車,BICYCLING=自転車,TRANSIT=電車,WALKING=徒歩
    travelMode: google.maps.DirectionsTravelMode.DRIVING,

    avoidHighways: false,
    //trueの場合、ルートサービスで可能な場合は高速道路を避けるように指示します。省略可能

    avoidTolls: false,
    //true の場合、ルート サービスで可能な場合は有料道路を避けるように指示します。省略可能

    provideRouteAlternatives: false,
    //代替ルートを提供するかどうかを指定します。省略可能

    unitSystem: google.maps.UnitSystem.METRIC
    //距離を表示する際に使用される優先単位系。デフォルトは出発地点の国で使用される単位系。
    //IMPERIAL=距離をヤード法の単位で表す。METRIC=の距離をメートル法の単位で表す。
};

DirectionsServiceのインスタンスを生成

var directionsService = new google.maps.DirectionsService();

出発地点と到着地点を設定します。

request.origin      = new google.maps.LatLng(34.73307796637832, 135.49859046936035);  //新大阪駅
request.destination = new google.maps.LatLng(35.681003987351055, 139.76703643798828); //東京駅

続きを読む…»

,
8,882 views

GoogleMapで面積計測（v3）

GoogleMapを利用し、図形を描画して囲った部分の面積を求めることができます。
ネットで探しましたが、バージョン3で組まれたものが見当たらなかったので書いておきます。

計測にはというジオメトリライブラリのユーティリティ関数（google.maps.geometry.spherical）を使用します。

コードはGoogleMapオブジェクト（map）は既に作成済のものとして書いています。
ついでに、距離も計測できるようにしています。
ご参考になれば幸いです。

ちなみに、某メーカーの住宅地図ソフトでの面積計測と精度は変わりませんでした。

GoogleMapAPI version 3.21

PolygonOptionsクラス

var myPolygonOptions = {
    clickable: false,       // クリックイベントの有効/無効
    fillColor: "#ffffff",   // 塗り潰し色
    fillOpacity: 0.6,       // 塗り潰しの不透明度（0.0-1.0）
    map: map,               // GoogleMapのインスタンス
    paths: new Array(),     // 座標の配列
    strokeColor: "#000000", // 線の色
    strokeOpacity: 0.8,     // 線の不透明度（0.0-1.0）
    strokeWeight: 3         // 線の太さ（ピクセル）
}

続きを読む…»

,
4,354 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,341 views

CSSだけで実装する簡単なアニメーション [Transition]

  • CSS
  • 2013-09-03

アンカーテキストの色をじわっと変えたりすることがCSSだけでできちゃいます。
jQueryを使ってもできるようですが、ここではCSSだけで実装します。

書式

transition:
    アニメーションさせたいプロパティの名前
    アニメーション終了までにかける時間を秒で指定（省略すると0）
    イージングの種類（省略するとease）
    アニメーションが始まるまでの遅延を秒で指定（省略すると0）;

例）

a
{
    color: #0099cc;
    text-decoration: none;
    bacground: #ffffff;
    transition: color 0.25s ease-in-out;
}
a:hover
{
    color: #95e4ff;
    text-decoration: underline;
    background: #49b6da;
}

続きを読む…»

2,555 views