第3回OAuth Consumerの実装（応用 : smart.fm APIおよびGoogle Data APIsの利用） 真武信和 2009-03-24
今日はHTML5のGeoLocationAPIを利用した位置情報取得、第2弾。 継続的に位置情報を取得する方法を試してみたので、それをブログに残しておきたいと思います。 HTML5の位置情報を取得する機能とは GeoLocation APIという機能を使う事で、Web画面でJavaScriptを利用する事で、位置情報（経度や緯度など）を取得出来るようになります。 ”HTML5で位置情報を取得する＠YoheiM.NET”をご参照ください。 継続的に位置情報を取得するには HTML5で位置情報を継続的に取得するには、navigator.geolocation.watchPositionメソッドを利用して位置情報を取得します。 // watch Position. var watchId = null; var watchButton = document.querySelector("#wat
![[HTML5] 位置情報を継続的に取得する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/1632d00b34fa7c78cf8450b7ea81f349cecd4a9b/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwww.yoheim.net%2Fimage%2F031.gif)
Slideshow with jmpress.j... / RefineSlide
モバイルアプリ開発でHTML5+WebViewが流行ってるようなので、WebViewってどんなものなのか一度触ってみました！ iOSのアプリだとUIWebViewっていうんですかね。今回は、AndroidのWebViewについて調べました。 なぜWebViewか？ そもそもなぜHTML+WebViewが良いのかと言いますと、ネイティブアプリで全部作るより簡単だからです。 実際にちゃんとしたアプリを作った事がないので知りませんが、今回Androidアプリ開発の構成を見た感じ、見た目整えるの超大変そうだった！ と想像で言っても説得力がないので、実際に使ってる人の意見を紹介すると、 Webアプリからの移植が楽 リンク付きUIが楽に作れる CSSが最強 だそうです。CSSが大きいのか。 参考(iOSのだけど)：UIWebViewでつくるUI WebViewで出来ること ざっと調べたところこんな感じ
Introduction In 2010, F-i.com and the Google Chrome team collaborated on an HTML5-based educational web app called 20 Things I Learned about Browsers and the Web (www.20thingsilearned.com). One of the key ideas behind this project was that it would best be presented in the context of a book. Since the contents of the book is very much about open web technologies we felt it was important to stay tr
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
✿ Our favorite set — Cop... / Modern Pictograms / Entypo他...全6件
Webサイトの待ち時間の80％はフロントエンドの処理によるもの なんて言われるとドキっとしちゃいます。どんな素敵にデザインして綺麗にコーディングしても、ページが重くてイライラしてるユーザーがいたら台無しです。なのでスマホ向けサイトのデザインに入る段階から、高速化・軽量化を意識するために、いくつか項目をメモしておきます。 デザインの段階から軽量化を意識する 画像を極力使わないで魅せる努力をする 当たり前ですが、画像を使えば使うだけレスポンスは遅くなります。背景画像にドデーンと写真を使ったり、見出しを使うたびに大きなアイコンを入れるなど、わざわざページを重くさせるようなデザインにする必要はありません。 多少シンプルになったとしても、色のメリハリ・1pxの線などでカバーしましょう。テキストも可能な限り画像にせず、デフォルト文字にするべきです。Webデザイナーの腕の見せ所ですね。 HTML5+C
こんにちは初めまして、石崎と申します。 今回は jQuery Mobile シリーズ3回目！ということで、jQuery Mobile デザイン編です！ jQuery Mobile には 標準のテーマ（色見本）が5つ用意されています。この標準のテーマを使用してアプリを作ることも可能です。しかし、アプリやサイトにはそれぞれのデザインやブランドイメージがあり、標準のテーマとは違うイメージのものを作りたい場合があります。 そんな時のために、今回は CSS などをカスタマイズして独自のデザインをいれていくノウハウについて説明します。 対象読者 CSS3, HTML5 の知識がある方 jQuery Mobile の仕組み 今回は jQuery Mobile のバージョン 1.0 RC2 を扱います。 先ほど述べたように、jQuery Mobile には標準のテーマが5つ用意されています。data-th
スマートフォンで押しやすいボタン型リンクを作るCSSスマートフォンでは、画面に表示されたリンクを指で直接押して操作します。リンクを「大きなボタンの形」にして掲載すれば、押しやすいリンクになるでしょう。CSSを使えば、リンク自体はHTMLのa要素を使って作る「普通のリンク」のままで、「ボタン」の形に見えるように装飾できます。 スマートフォンは、主に指で画面に触れて操作します。リンクを大きめの「ボタン型」に装飾しておくと、指で押しやすいリンクになるでしょう。例えば、右図のようにです。 これは、「ボタンに見える」よう装飾しただけで、リンクそのものは（普通のリンクと同様に）HTMLの「a要素」で作っています。CSS3で加わったいくつかのプロパティを用いれば、このようにボタンに見えるよう装飾できます。 リンクをボタン型に装飾した例 HTMLでリンクを作る際は、以下のようにa要素を使って記述します。
![スマートフォンで押しやすいボタン型リンクを作るCSS [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> * { word-break: break-all; -webkit-touch-callout:none; -webkit-tap-highlight-color:rgba(255,255,0,0.4); -webkit-text-size-adjust:none; } word-break: break-all; URLなどの文字列の強制改行。ただし句読点なども先頭にくるため要検討。 -webkit-touch-callout:none; 長押しした際のとび先URL非表示。ただし画像リンクをタップした際のハイライトがおかしくなる。aタグ要素にdisplay: block ;を指定す
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
CSS3 ノンサポートの IE でも CSS3 の border-radius、box-shadow、text-shadow などの、エフェクト系プロパティを利用する為のライブラリをご紹介します。また、最後に IE の filter を使ったコードもまとめてあります。 IEでも CSS3 の表現をするためのライブラリを使ってみました。IE9 がどれくらい普及するか分かりませんが、IE9 の CSS3 のサポートを見る限り、相変わらず IE だけ特別扱いしてあげないとダメなところもありそうですねー。以下のリンクで、IE9 の CSS3 サポートの状況をチェックできます。 Impressive Webs CSS3 Support in Internet Explorer 9 今回は、IE8 以下でもいくつかの CSS3 のプロパティを利用できるようにするためのライブラリを、2つほどご紹介します
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
