Home > Web ブログ記事 一覧

Web ブログ記事 一覧
Google Maps × HTML5! 位置情報取得API「Geolocation」
- 2011年6月 1日 23:55
- Web
【こちらの記事は、約5分程でお読みいただけます。】
こんばんは!いつもKENスクールのブログを
お読みいただきまして、ありがとうございます!
今日はGoogleのAPIサービスのお話をしていきます。
皆さんは、携帯電話をお持ちになっている方がほとんどかと思いますが、
現在「スマートフォン」がかなり高いシェア率になっていますよね!
先日のKENスクールブログでも、取り上げられたばかりでした^^
⇒Webブログ「スマートフォン - Android OS別出荷台数 -」
http://web.kenblog.net/mobile/1105-android-os.html
日常持ち歩くことの多いスマートフォン(携帯電話)。
現在地の周りにあるお店を調べたりするときに、利用するケースも多くなりました。
また、現在地を、入力フォームの住所や郵便番号に
自動入力させる事も可能ですし、
Webページがより便利に活用できるように日々進化していますよね。
こうした位置情報を取得する
「Geolocation(ジオロケーション)」というサービスを紹介 します。
まずは、今回のサンプル完成例をご紹介します。

上記の画像は、KEN School大宮校の
位置情報をもとに、Google Mapで表示した画面です。
結果は、市役所を表示したようになっていますが…。^^
若干緯度や経度にばらつきがあるようですが、
概ね近くの場所が表示されます。
次に、そのコードの紹介です。
実はこれ、HTML5で書かれているんですよ!

まずは、8行目の、
「navigator.geolocation.getCurrentPosition(success,failure);」
について、解説します。
「getCurrentPosition」は、現在開かれているブラウザの位置情報を取得し、
成功時の処理と、失敗時の処理を()の中に記述しています。
成功時には、10行目から15行目で記述されている「success」が実行され、
失敗時には、17行目から19行目の「failure」が実行される事になります。
次に、位置情報を取得が成功した処理「success」の内容の確認です。
11行目 「position.coords.latitude」 では、緯度を取得しています。
12行目 「position.coords.longitude」 では、経度を取得しています。
13行目で取得した緯度と経度をもとに「Google MapのURL」を作成して、
14行目 「location.href = uri」 と「Google Mapのページ」を表示しています。
location.hrefはHTMLの<a href="">をクリックした時と同じ動作です。
皆さんも是非サンプルコードをお試しになって、
地図が表示されるのを確認してみてください!
※Firefoxなどのモダンブラウザにて、動作確認をするのが良いです。
今後もHTML5の新しい技術をもとに、
どのような仕組みやサービスが出てくるのか楽しみです^^
--------------------------------------------------------------------------------
KENスクールで「プログラム」を一から学習していきませんか??
⇒【無料のマンツーマン体験レッスンを受けてみよう!】
KENスクールでは、プログラムが初めての方でも、
安心して学習していただける環境です!
プログラムとは何か?から始まり、
様々に利用されているプログラミング技術を分野ごとに紹介します。
是非、無料体験レッスンを受けてみてください!
本日の更新者:
パソコンスクール KENスクール Programコース
インストラクター 加藤
- Comments (Close): 0
- TrackBack (Close): 0
Webサイト検索システム - 自然言語検索 -
- 2011年5月15日 12:00
- Web
【こちらの記事は、約3分程でお読みいただけます。】
皆さん、こんにちは!
今回は、皆さんが日頃よく使うWebサイトの検索システムについてお話します!
物事をWebで検索する時には、ほとんど単語で検索していきますが、
皆さんこういう経験はありませんか?
●欲しい検索結果が出てこない。
●なんかちょっとポイントづれているんだよな、この結果じゃ・・・。
そんな時に単語を入力するのではなく、
文章を入力して検索するシステム、それが「自然言語検索」です。
例えば…、
●マンション購入に必要な知識は?
●パソコンで社会はどう変わるの?
●快適な生活に必要なものは? という感じで検索します。
そうするとその内容に応じた検索結果が表示されます。
また、ユーザの質問に対して答えが表示される検索エンジンも
開発されているいるようです。
例えば…、
"地球から月までの距離は?" と入力して検索すると、
その回答が表示されるそうです。これはとても便利ですね!
Web上には実際に自然言語検索を体験できるサイトがありますので、
みなさんも1度試してみてはいかがでしょうか。
京都大学 TSUBAKI http://tsubaki.ixnlp.nii.ac.jp/index.cgi
--------------------------------------------------------------------------------
KENスクールなら、IT・Web業界必須のSEO知識だって無料で受講できますよ♪
⇒【Web/DTP講座受講特典『プロモーションパック』】
今回の検索エンジンの知識に関しては、SEO講座で学ぶことが出来ます。
しかも、就職・転職をお考えの方には、こちらは無料で受講できてしまうんです!
もちろんWebだけでなく、それぞれ就職対応コースで、
様々な無料特典を用意しています。ぜひ、ご活用くださいね!
本日の更新者:
パソコンスクール KENスクール Networkコース
インストラクター 菅野
- Comments (Close): 0
- TrackBack (Close): 0
ブログパーツを設置しよう!
- 2008年8月23日 23:49
- Web
過去の記事でST(感性制御技術)について記述しましたが、他のインストラクターから「マニアックすぎるのではないか?」という指摘を受けてしまいました。。
原因は貼り付けたブログパーツにあると思うのですが…違いますか。
まぁそんな事は気にせず、今回はブログパーツに触れていきましょう!![]()
ブログパーツとは、文字通りブログに設置できるアクセサリーのようなものです。
ブログパーツ.com
http://www.blog-parts.com/
このサイトにあるように無料のパーツもたくさんあります。
その中で面白そうなものがあったので一緒に見てみましょう。
アクアミュージアム
http://www.aqua-museum.net/
このパーツは熱帯魚や水草を自分で水槽に配置して、
それをそのままブログに設置できるというものです。
ちなみに右上の「FEED」ボタンでエサをあげたり、水槽の一部をクリックして熱帯魚をその位置に移動させることができますね。(ものすごい勢いで一ヶ所に集まります)
今回作成された文章は以下の通りです。
<script type="text/javascript">var aqmParam = "030302000200020003000300";</script>
<script type="text/javascript" src="http://www.aqua-museum.net/aqua/aqua.js"></script>
< > の記号はタグと呼ばれるもので、ホームページやブログ上で文字の書式等を指定するものでしたね?
今回は <script>~</script> までの記述が2セット出来上がっています。
2行ともホームページの表示結果を状況に応じて変化させるJavaScriptの命令を書いています。
何故分かるのかというと、タグの前半にある
<script type="text/javascript">
の中で、このタグの「type」は、「text」形式で記述した「javascript」ですよ…と指定しているからなんですね。
ではタグの中身を見てみましょう。
1行目は、var aqmParam = "030302000200020003000300";
自分で作成しているわけではないので勘ですが、魚や水草の配置を数値で表現しています。
var aqmParam というのは、「変数」と呼ばれる「一時的にデータを格納しておく領域」です。
2行目のタグの中身は何もありませんが、scriptタグの中に、src="http://www.aqua-museum.net/aqua/aqua.js"という記述があります。
これはJavaScriptの処理命令が書いてあるファイルへのリンクです。
簡単に言ってしまうと「1行目で水槽の配置を数値データ化して、2行目に指定したJavaScriptが記述してあるファイルにリンクさせている」のですね…全然簡単に言ってませんね。
とにかく数値データを色々といじると結果が変わりそうだと思っていただければ幸いです。
このブログパーツはアニメーション作成ソフトである「Flash」を使用しているので、最終的にはJavaScriptからFlashにデータを渡してブログパーツを作成しているようです。
今やwebページを作成するには
- HTML
- JavaScript
- Flash
や、ここでは触れていない
- ActionScript
- XML
といった知識が必須と言えるほどに求められるようになってきました。![]()
つまり「過去の様々な技術を統合して利用する時代になってきた」んですね。
そうなると、それらを一括して管理する開発環境があると凄く便利なんじゃないかと…。
この話はまた後程にしましょう…きっと別のインストラクターが記事にしてくれるはずです(苦笑
さて今回扱ってきたブログパーツは、ブログによっては記事の中だけでなくブログのカテゴリ(ブログの外枠にあるカレンダーと同じ扱いの所)として設置できるものもあります。
「ブログなんて持っていないよ」という方も、これを機会にご自分のブログを持ってみても良いかもしれません。
- Comments (Close): 0
- TrackBacks: 0
回線速度と最新ブラウザ
- 2008年8月 4日 23:55
- Web
先日、知人のA君が言っていました。
「家のインターネット回線がADSLで、Webサイトの表示が遅い!光に変えようかな?」
こんな時は、回線速度と同じようにブラウザも疑ってみてください。
未だ、多くの人がWindowsに搭載されていたInternet Explorer6を使用しています。
たしかに安定性の高い良いブラウザですが、7年前に公開されたソフトである事も事実です。
一般的にWebサイトは、
Webサーバーと呼ばれる世界中の人がアクセス出来る様にしたコンピュータから、
HTMLと呼ばれる文章とJavaScript等、
送られてくるプログラムのデータを読み込んで、プラウザ上に表示しています。
これは、Webサーバーからどんなに早くデータが届いても、
それを表示する処理が速くならない限り表示速度は頭打ちである事を意味します。
つい先日、主要ブラウザであるOpera 9.5とFirefox 3が相次いでリリースされました。
当然のようにInternet Explorerの新しいバージョンであるInternet Explorer7と共に、色々な所で比較と検証が行われたわけですが・・・この2つ、凄いです!!
Opera 9.5、Firefox 3の方がInternet Explorer7よりも
JavaScriptに関しては約3~8倍の速度で処理されるようです!
最近のWebサイト傾向として、表示にスムーズな動きを提供するため、皆さんの目の前にあるパソコンに負担がかかる物が増えています。
この事から、今後ブラウザの処理速度が大きな差になるのは間違いありません。
ちなみにA君はOperaを導入して描画タイミングを調整したらサクサク表示されるようになったそうです。
めでたし。めでたし。
- Comments (Close): 0
- TrackBacks: 0
安全なWebサイト運営入門
- 2008年7月30日 19:33
- Web
現在、個人や法人のネット販売サイトが数多くあります。
このブログを読まれている方の中にも、ネット販売できるサイトを作りたいな、
と思っていらっしゃる方がいるかもしれませんね。
そんな方にぜひやってほしいのが、こちら!
これは、独立行政法人 情報処理推進機構(IPA)が公開しているソフトウェアです。
ユーザーが主人公として、ある会社のネット販売事業部の担当を任されるというストーリーで、
ロールプレイング形式でWebサイトのセキュリティの重要性について体験できます。
Webサイトの脆弱性(ぜいじゃくせい)によって起こる 7つの事件に遭遇するのですが、
実際に起こっているケースをもとにしているので、リアリティがあって、これが結構おもしろいんです。
3年間で7つの事件に遭遇するのですが、そのときの対応によって営業成績が変わったり、
すべての事件を乗り越えるとA~Fの6段階評価付きの修了証がもらえたりと、
楽しみながらWebサイトを運営する上で必要なセキュリティの知識を学ぶことができます。
自分でWebサイトの運営をすることは考えていないけど・・・という方でも、
ウィルスの種類やどういう仕組みでネットから個人情報が盗まれるかといったこともわかるので、
下記の言葉のうち一つでもわからない・・・という方は、一度ゲーム感覚でやってみてはいかがでしょうか。
ユーザーが遭遇する7つの事件は・・・
| 1. | 電子メールの誤送信 |
| 2. | クロスサイト・スクリプティング |
| 3. | SSL(Secure Socket Layer)サーバ証明書の期限切れ |
| 4. | ウイルス感染 |
| 5. | サービス運用妨害 (DoS: Denial of Service) |
| 6. | セッション管理の不備 |
| 7. | SQL(Structured Query Language)インジェクション |
- Comments (Close): 0
- TrackBacks: 0
Home > Web ブログ記事 一覧




