Copyright © 2004-2024 Impress Corporation. An Impress Group Company. All rights reserved.
HTML5の便利なTips100選
Copyright © 2004-2024 Impress Corporation. An Impress Group Company. All rights reserved.
クッキーより便利になったブラウザ標準ストレージ - Web Storage
TIPS 034：ストレージにデータを保存する TIPS 035：ストレージのデータを取得する TIPS 036：ストレージのデータをツールから確認する TIPS 037：ストレージからすべてのデータを取り出す TIPS 038：ストレージ上のデータを削除する TIPS 039：ストレージにオブジェクトを出し入れする TIPS 040：ストレージの登録／更新／削除を監視する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 ストレージは、大きくセッションストレージとローカルストレージに分類できます。両者の違いは有効範囲です。 セッションストレージ（Session Storage）は、ブラウザが起動している間だけ有効です。ブラウザを閉じたタイミングでデータは破棄されますし、異なるウィンドウ／タブ同士でもデータを共有することはできません。 一方、ローカルストレ
スマホアプリ開発にも便利な位置情報API - Geolocation API -
TIPS 001：現在の位置情報を取得する 現在の位置情報を取得するには、navigator.geolocationオブジェクトのgetCurrentPositionメソッドを利用します。以下は、Geolocation API経由でユーザーの現在位置を取得し、経度／緯度／方角を表示する例です。 ［リスト］現在の位置情報を取得するコード（current.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> window.addEventListener('DOMContentLoaded', function() { // 結果の表示先（<div>要素）を取得 var latitude = document.querySelector('#latitude
HTML＋JavaScriptだけでブラウザに図形描画 - Canvas API -
TIPS 007：キャンバスを準備する Canvas APIを利用するには、まず図形の描画先（＝キャンバス）を準備しておく必要があります。 ［リスト1］キャンバスを準備するコード（canvas.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <!--キャンバスの背景色／枠線を指定（3）--> <style> #cv { background-color: #FFF; border: 1px solid black; } </style> <script> ...中略... </script> </head> <body> <!--キャンバスの準備（1）--> <canvas id="cv" width="400" height="300"> <!--Canvas機能
HTML＋JavaScriptだけでブラウザに図形描画（2） - Canvas API -
TIPS 018：キャンバスにテキストを描画する TIPS 019：文字列の横幅を計算する TIPS 020：図形に影効果を追加する TIPS 021：線形グラデーションを表現する TIPS 022：円形グラデーションを表現する TIPS 023：キャンバスに画像を貼り付ける TIPS 024：画像の一部を切り出して貼り付ける TIPS 025：画像を繰り返し表示する TIPS 026：画像の特定領域を切り抜く TIPS 027：特定の座標がパス領域に含まれるかを判定する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 018：キャンバスにテキストを描画する キャンバスにテキストを描画するには、strokeText／fillTextメソッドを利用します。 ［リスト1］キャンバスに塗りつぶし文字、枠文字を描画するコード（text.html） wi
HTML＋JavaScriptだけでブラウザに図形描画（3） - Canvas API -
第2回、第3回と続いてきたCanvas API編も、今回が最後。本稿では、キャンバスの設定を保存する方法やキャンバスの内容をデータ化する方法、ユーザーのマウス操作に応じて図形を描画する方法などなどについて紹介します。 TIPS 028：画像が重なった場合の処理方法を指定する TIPS 029：キャンバスの設定を保存＆復元する TIPS 030：画像を拡大／回転／変形して表示する TIPS 031：キャンバス上の図形の一部を切り出す／貼り付ける TIPS 032：マウスポインタの座標に応じて図形を描画する TIPS 033：キャンバス上の図形をData URL形式で保存する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 028：画像が重なった場合の処理方法を指定する globalCompositeOperationプロパティを利用することで、画
[ThinkIT] 第5回：イントラブログ導入の勘所、5W2H (1/3)
これまでの連載では様々な角度からイントラブログの特徴やメリットを解説してきました。これまで説明してきたように、イントラブログは非常に自由で制約が少なく、どんな使い方でもできるアプリケーションです。使う人、考え方、利用シーンによって様々に形を変えるアプリケーションといえるでしょう。 しかし、自由度の高さ、制約の少なさはイントラブログの大きなメリットの1つである反面、目的や方針を見失いやすく、時に有効活用からは程遠くなってしまいます。すると、安易にイントラブログを導入してしまうと、どんな使い方でもできてしまうため「何をして良いのかわからない」「どんな使い方をすれば良いのかわからない」ということになり、利用率が下がってしまいます。 連載の最後となる今回は、実際にイントラブログを導入するにあたってのポイントや必要な準備、注意事項などを説明します。 イントラブログ導入にあたってのポイントですが、一般
[ThinkIT] 第3回：SQLインジェクションの注意点 (1/3)
データベースを扱う時に考慮しなければならない最後の問題は、おそらくアプリケーションのデータベースに対する認証情報、つまりデータベースアクセスを許可するログイン情報やパスワードをどうやって保持するのか、ということではないでしょうか。ほとんどのアプリケーションではPHPの小さな設定スクリプトを使ってログイン名やパスワードを変数に割り当てています。 このような設定ファイルが、サーバ利用者が自由にアクセスして読めるような状態になっていることが（専用ホストでないなら）よくあります。しかし誰にでも読めるということは、同じシステム上の誰でも、または悪質なスクリプトがそのファイルを読み、データベースログインに必要な情報を盗めてしまうということです。 さらに悪いことに、多くのアプリケーションではこのファイルはウェブ上から閲覧可能なディレクトリに置かれており、.incのようなPHPファイルと認識されない拡張子
[ThinkIT] 第2回：クエリを使用したSQLインジェクション (1/3)
しかし、エスケープ関数を使えばいつでもデータの安全性が保障されるわけではありません。あるクエリに対しては、エスケープを適用した後でもSQLインジェクションを許してしまいます。Int型の値をとることを想定した次の場合について考えてみましょう。 $id = "0; DELETE FROM users"; $id = mysql_real_escape_string($id); // 0; DELETE FROM users mysql_query("SELECT * FROM users WHERE id={$id}"); Int型の時は、値をシングルクォートで囲う必要がありません。そのため、セミコロンでクエリが分割され、SQL文を不正に入れることができます。セミコロンには'特別'な意味はないため、データベースのエスケープ関数にもaddslashes()にもスルーされてしまいます。 この問題に
[ThinkIT] 第1回：SQLインジェクションによるデータベース操作 (1/3)
SQLインジェクションでは、クエリなどの任意データを、データベースが実行するSQL文に挿入します。挿入されたクエリは、意図しないデータを検索したり、データベースの情報を変更したり削除したりするというように、様々な操作をデータベースに行います。問題を実証するために次の例を見てみましょう。 // 問題を実証するための入力 $name = "ilia'; DELETE FROM users;"; mysql_query("SELECT * FROM users WHERE name='{$name}'"); 上記の関数内では、ユーザが指定した名前とnameカラムの値が一致したデータをusersテーブルから取り出すことを想定しています。普通、$nameには、iliaといった文字列のように、アルファベットとスペースからできた文字列が格納されています。 しかしここでは、$nameにまったく新しいクエリ
[Think IT] 第3回：Adobe AIRで付箋風クライアントを作ろう (1/3)
「第2回：新機能『scaffold_resource』とは？」では、RESTfulを活用したメモアプリケーションを作りました。この付箋を常駐してこそ便利なWebブラウザの中だけでなく、画面上のどこにでも貼れるとしたら非常に便利だと思いませんか？ しかしWebアプリケーションでは、デスクトップ上に付箋を貼ることができません。WebブラウザからJavaScriptを使って新しいウィンドウを開くことはできますが、ウィンドウの枠を消すなどの細かい制御ができないため、付箋のようなインターフェースを作ることができません。 また、WebアプリケーションはWebブラウザを閉じてしまうとすべてのウィンドウが閉じてしまうため、付箋紙のような「常駐してこそ便利な」アプリケーションには向いていません。 そこで、2007年3月にAdobeから発表されたリッチクライアント「Adobe AIR」を使って、付箋を表示する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
