HTML：Googleマップを携帯サイトで表示する方法

Posted on by
返信

携帯（ガラケー）サイトでGoogleマップを表示した時の方法をメモします。

今まで携帯サイトで地図情報を表示する場合は、
地図画像を作成し表示するなどしていました。

Goolge Maps APIを使用すれば緯度・経度を指定し、
その他必要な情報を設定するだけでGoogleマップを出力してくれます。

■ Googleマップ画像　表示方法

下記のURLにアクセスすると、Googleマップ画像を出力してくれます。

http://maps.google.com/maps/api/staticmap?center=35.689487,139.691706&zoom=13&markers=35.689487,139.691706&size=200x200&sensor=false

表示したい情報（パラメーター情報）に書き換え、HTMLのimgタグで表示します。
HTMLに挿入するコードは以下のようになります。

<img src="http://maps.google.com/maps/api/staticmap?center=35.689487,139.691706&zoom=13&markers=35.689487,139.691706&size=200x200&sensor=false">
実際に出力したGoogleマップは下記のようになります。

■ パラメーターの説明

「center」
経度・緯度を指定します。

「zoom」
地図の拡大縮小サイズを指定します。

「markers」
マーカーの経度・緯度を指定します。
カラーやサイズなども指定可能です。

「size」
出力する画像サイズを指定します。

「sensor」
trueかfalseを指定します。
携帯サイトで表示する場合はfalseを指定します。

上記の方法でGoogleマップを携帯サイトで表示することができるので、
地図画像を作る必要がなくとても便利です。

Chrome：Chromeでユーザーエージェントを変更する方法

Posted on by
返信

Chromeでユーザーエージェントを変更する場合、拡張機能を使用することで簡単にユーザーエージェントを変更することができます。

chrome_useragent_1

自分のサイトや他のWEBサイトがiphoneではどのように表示されるのか、他のブラウザではどのように表示されるのかなど気になると思います。
またモバイルなどでチェックしたい場合、端末がないことが多いですがユーザーエージェントを変更することでモバイル（ガラケー）の画面もチェックすることが可能です。

下記にユーザーエージェントを変更できる拡張機能をご紹介します。

■ User-Agent Switcher

chrome_useragent_2

下記のダウンロードページにアクセスします。

User-Agent Switcher

「+CHROMEに追加」ボタンをクリックし、「User-Agent Switcher」をChromeに追加します。

chrome_useragent_b

追加するとアイコンが表示されるので、アイコンをクリックし変更したいユーザーエージェントに変更します。

chrome_useragent_4

リンククリック後、画面をリロードすると選択したユーザーエージェントの画面で表示されます。
下記は「iPhone」リンクをクリックし、「YAHOO」をChromeで開いた時の表示です。

chrome_useragent_5

■ User-Agent Switcher for Chrome

chrome_useragent_3

下記のダウンロードページにアクセスします。

User-Agent Switcher for Chrome

「+CHROMEに追加」ボボタンをクリックし、「User-Agent Switcher for Chrome」をChromeに追加します。

chrome_useragent_b

追加するとアイコンが表示されるので、アイコンをクリックし変更したいユーザーエージェントに変更します。
※Settingsリンクで新しくユーザーエージェントを追加することができます。

chrome_useragent_6

変更したいユーザーエージェントを選択するとユーザーエージェントが変更され画面が表示されます。

chrome_useragent_7

WEBサイトを作成する方にはいちいち他のブラウザや端末でチェックしながら作業しなくていいの制作の効率も上がると思います。
最終的には本物のブラウザ・端末でチェックしなければいけないと思いますが。。。

Javascript：submitした時の位置情報を取得し、ロード時に表示位置を指定する

Posted on by
返信

HTMLのフォームでsubmitした場合、ロードした画面の表示スクロール位置はリセットされてページの先頭が表示されます。
submitした時の表示位置のまま、ページロード後もスクロール位置を変更しないで表示したい場合があります。

今回はJavascriptでsubmitした時の位置情報を取得し、ロード後の画面でsubmitした時のスクロール位置を変更しないで表示する方法を記載します。

■ Javascriptでブラウザの位置情報を取得し、ロード時に表示位置を指定

下記で縦と横の位置情報を取得します。

<script type="text/javascript">
    x = document.documentElement.scrollLeft || document.body.scrollLeft;
    y = document.documentElement.scrollTop || document.body.scrollTop;
</script>
submit時に取得した位置情報をhiddenに格納し、データをPOSTします。
　
　
画面ロード時に送信した位置情報で画面のスクロール位置を指定します。
onloadイベントで表示スクロール位置を設定しています。

<script type="text/javascript">
window.onload = function(){
    window.scroll(<?php echo $data['x']; ?>, <?php echo $data['y']; ?>); 
}
</script>
上記の方法で値を取得しておけば、ロード時に表示位置を変更せず画面を表示することができます。
位置情報はphpでechoしています。

Fuelphp：fuelphpでcron（クーロン）を実行する方法

Posted on by
返信

fuelphpでcronを実行したい場合、fuelphpのタスクを利用します。
タスクはcronを実行することができるクラスです。

定期的に実行するプログラムなどをタスクで作成し、cronで実行した際の方法をメモします。

■ cronで作成したタスクを実行する方法

タスクは下記のディレクトリに格納します。
「hoge.php」に実行したいプログラムを記述します。

fuel/app/tasks/hoge.php

クーロンを設定します。

# crontab -e

クーロンは下記のように指定します。
タスクをコマンドラインで実行する時と同じように記載します。

0 10 * * * /usr/bin/php /var/www/html/oil refine hoge

上記は、タスクで作成した「hoge.php」を毎日10時に実行することができます。

Fuelphp：タスクを使用したコマンドラインからの実行

Posted on by
返信

fuelphpではタスクという機能を使用するとコマンドラインからプログラムを実行することができます。
コントローラと同じようにモデルやクラスを使用できるので、とても便利です。

また、タスクで作成したプログラムはcronで実行することができるので、定期的に実行したいプログラムがある場合などにも使用できます。
今回はfuelphpに最初から入っていた「robots.php」を実行した時の操作方法をメモします。

■ タスクを実行する（robots.php）

タスクを作成したファイルは下記の場所に格納します。

fuel/app/tasks/

実行する際は「oil」の「refine」を呼び出します。
タスクを実行するために「refine」を記述します。

タスク名のみ記載した場合は、「run()」を実行します。

# php oil refine robots

                                        "KILL ALL HUMANS!"
                                  _____     /
                                 /_____\
                            ____[\*---*/]____
                           /\ #\ \_____/ /# /\
                          /  \# \_.---._/ #/  \
                         /   /|\  |   |  /|\   \
                        /___/ | | |   | | | \___\
                        |  |  | | |---| | |  |  |
                        |__|  \_| |_#_| |_/  |__|
                        //\\  <\ _//^\\_ />  //\\
                        \||/  |\//// \\\\/|  \||/
                              |   |   |   |
                              |---|   |---|
                              |---|   |---|
                              |   |   |   |
                              |___|   |___|
                              /   \   /   \
                             |_____| |_____|
                             |HHHHH| |HHHHH|

タスク名の後にスペースを入れ、その後に値を記述した場合、引数を渡すことができます。

# php oil refine robots HELLO

                                        "HELLO"
                                  _____     /
                                 /_____\
                            ____[\*---*/]____
                           /\ #\ \_____/ /# /\
                          /  \# \_.---._/ #/  \
                         /   /|\  |   |  /|\   \
                        /___/ | | |   | | | \___\
                        |  |  | | |---| | |  |  |
                        |__|  \_| |_#_| |_/  |__|
                        //\\  <\ _//^\\_ />  //\\
                        \||/  |\//// \\\\/|  \||/
                              |   |   |   |
                              |---|   |---|
                              |---|   |---|
                              |   |   |   |
                              |___|   |___|
                              /   \   /   \
                             |_____| |_____|
                             |HHHHH| |HHHHH|

タスク名の後に「:」でメソッドを呼び出すことができます。
下記は「robots.php」の「protectメソッド」を呼び出した時の例です。

# php oil refine robots:protect

                                        "PROTECT ALL HUMANS"
                                  _____     /
                                 /_____\
                            ____[\*---*/]____
                           /\ #\ \_____/ /# /\
                          /  \# \_.---._/ #/  \
                         /   /|\  |   |  /|\   \
                        /___/ | | |   | | | \___\
                        |  |  | | |---| | |  |  |
                        |__|  \_| |_#_| |_/  |__|
                        //\\  <\ _//^\\_ />  //\\
                        \||/  |\//// \\\\/|  \||/
                              |   |   |   |
                              |---|   |---|
                              |---|   |---|
                              |   |   |   |
                              |___|   |___|
                              /   \   /   \
                             |_____| |_____|
                             |HHHHH| |HHHHH|