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

jQueryプラグイン Masonry

「Masonry」とはJavaScriptグリッドレイアウトライブラリです。
高さの違う要素を、パネルを敷き詰めるようにレイアウトしてくれるというものです。

ウィンドウのサイズが変われば、アニメーションしながら並び替えという動作も行ってくるので、
レスポンシブWEBデザインとしても利用できます。

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

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

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

続きを読む…»

, ,
1,951 views

GoogleMap ルート検索

GoogleのGoogleMap APIを使ってルート検索をすることができます。

まず、ルート検索のプロパティを指定します。

// Route Request Property
var request = {
    origin: null,            // 出発地点のLatLngオブジェクト
    destination: null,       // 到着地点のLatLngオブジェクト
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    avoidHighways: true, // true に設定すると、高速道路を可能な限りルートの計算から除外するように指定されます。（省略可能）
    avoidTolls: true     // true に設定すると、有料道路を可能な限りルートの計算から除外するように指定されます。（省略可能）
};

トラベルモードについては

DRIVING=自動車
BICYCLING=自転車
TRANSIT=電車
WALKING=徒歩

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

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

DirectionsServiceのインスタンスを生成

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

ルート表示のオブジェクトを作成し、プロパティを設定します。 続きを読む…»

,
5,993 views

カメラを扱うまとめ – Android

Androidでカメラを扱うまとめです。
単純に撮った写真を保存するパターンと、パラメーターを指定して保存するパターン、
撮影した画像を圧縮して保存するパターンの３パターンを紹介します。

まずは、カメラを使用するために必要なパーミッションをAndroidManifest.xmlに記述します。

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.FLASHLIGHT" />

<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-feature android:name="android.hardware.camera.flash" />

撮影処理をするSurfaceViewを継承したクラスを作成します。

まず、簡単に保存するパターン 続きを読む…»

, , ,
4,863 views

レスポンシブwebデザインのCSS

  • CSS
  • 2013-08-05 - 更新:2013-08-08

簡単なレスポンシブwebデザインを実装してみましょう。
以下のようなHTMLがあったとします。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div class="content">
    sample
</div>

</body>
</html>

まず、どんな画面サイズでも共通となるスタイルを記述します。

@charset "utf-8";

*
{
    margin: 0;
    pading: 0;
}

各画面サイズに適用するスタイルをMediaQueryを使って指定していきます。
続きを読む…»

, ,
1,728 views

端末の起動時に処理を実行する [Android]

Androidでは、端末の起動時に発行されるandroid.intent.action.BOOT_COMPLETEDというブロードキャストインテントを受け取り、処理を実行させることができます。

これを利用し、バックグラウンドで常駐するアプリを作成することが可能です。
ここでは例として位置情報を取得し、位置情報が更新されたらトーストでメッセージを表示するサービスをバックグラウンドで常駐させるように作成しています。

AndroidManifest.xmlのapplicationタグ内に以下を記述

<service android:name="ExampleService"></service>
<receiver
    android:name=".BootReceiver"
    android:enabled="true">

    <intent-filter>
        <action android:name="android.intent.action.BOOT_COMPLETED" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</receiver>

起動時にブロードキャストインテントを受け取れるようにパーミッションの設定を記述します。

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

ブロードキャストインテントを受け取るブロードキャストレシーバーを 続きを読む…»

10,096 views