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

クラウド型スケジューラーパッケージ

現在はパッケージ版の販売を終了しています。
サブスク版にてご提供していますので、そちらをご覧ください。
https://seion.biz/app/kuranosuke/


シンプルで使いやすいWEBで使えるスケジューラーをパッケージ化し、ココナラで販売中です。
シンプルながら有給休暇の管理(申請から管理者の承認まで)もできます!

従業員が今、社内にいるのか、外出中なのか、現在の状況が一目でわかります。
週間の予定表示もあり、全体の予定把握も簡単です。月間表示も可能!

詳細は下記からご覧ください。

クラウド型スケジューラーパッケージを提供します 従業員の予定を一元管理!有給休暇の管理もできる

814 views

テキストエリアの途中に文字を挿入する

テキストエリアの先頭や末尾に文字を追加するのは簡単ですが、途中(カーソル位置)に挿入するにはひと手間必要です。

例として適当なフォームを作成します。

<form name="myForm">
    <textarea name="myTextarea"></textarea>
    <input type="submit" value="送信">
</form>

次に以下のようなボタンを作ります。

<button onclick="addText();">文字追加</button>

ボタンを押したときに実行されるJavaScriptが以下のようになります。

function addText()
{
    var textarea = document.myForm.myTextarea;
    var pos      = textarea.selectionStart;

    var before   = textarea.value.substr(0, pos);
    var after    = textarea.value.substr(pos);

    textarea.value = before + "追加する文字列" + after;
}
2,835 views

Geocoder APIを利用した座標変換

Geocoder APIを使えば住所から座標を取得することができます。
今回はJavaScriptではなくHTTPリクエストで座標を取得する方法をご紹介します。

取得するデータはJSON形式で受け取るようにしています。
使用する言語はPHPです。

まずはリクエストするURLとAPIキーを宣言

$googleapis = "https://maps.googleapis.com/maps/api/geocode/json";
$api_key    = "YOUR API KEY";

続いてパラメーターを追加していきます。
検索する住所を追加

$googleapis .= "?address=" . $address;

国を指定(同じ名前の地名が中国等にあるとそちらの座標になってしまうことがあります)

$googleapis .= "&components=country:JP";

APIキーを設定します

$googleapis .= "&key=" . $api_key;

file_get_contents関数を使ってデータを取得します。

$data = file_get_contents($googleapis);

返ってきたJSONデータを解析して座標を取り出します。

$json = json_decode($data);

$lat = $json->results[0]->geometry->location->lat;
$lng = $json->results[0]->geometry->location->lng;

if( $json->status == "OK" ) {
    echo $lat . "," . $lng;
}

詳細な仕様は公式ドキュメントを参照ください。
https://developers.google.com/maps/documentation/geocoding/intro#GeocodingRequests

1,232 views

iOS12.3.1でイベントdeviceorientationが動作しない

iOS 12.3.1のSafariでは、デフォルトでセンサーの値が取得できなくなったようです。

window.addEventListener("deviceorientation", function(event){}, true);

上記イベントがキャッチできません。

iOS 12.1では動作することを実機で確認しました。

対応策としては[設定]-[Safari]-[モーションと画面の向きのアクセス]をONにすると
キャッチできるようになりますが、一般ユーザーにこの設定を変えてもらうわけにはいきませんよね;
他に何か有用な情報を発見したら追記したいと思います。

1,315 views

GoogleMapにGeoJsonデータを読み込んで表示する

GoogleMapに図形等を描画するのに非常に便利な方法がありました。

//GoogleMapインスタンスを生成(v3)
map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(35.6585809608813, 139.74543258547783) } );

// GeoJsonを読み込む
map.data.loadGeoJson('sample.geojson');

// スタイルを設定
map.data.setStyle(function(feature) {

    var myStyle = {
        fillColor: "#9AD2AE",
        fillOpacity: 0.5,
        strokeColor: "#1EB26A",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        clickable: true,
        visible: true,
        zIndex: 1
    };

    return (myStyle);

});

sample.geojsonの内容

{
"type": "FeatureCollection",
"name": "sample",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "サンプル1" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 139.74472479682004, 35.659171090464596 ], [ 139.74610447883606, 35.659171090464596 ], [ 139.74610447883606, 35.65809388391181 ], [ 139.74472479682004, 35.65809388391181 ], [ 139.74472479682004, 35.659171090464596 ] ] ] } }
]
}

今回はポリゴンのみですが、他にポイントやポリラインもGeoJsonで読み込み可能です。
GeoJsonは統一された規格なので汎用性があり便利です。

3,291 views