Web Share APIを試してみた - アクトインディ開発者ブログ
morishitaです。 いこーよやいこレポでは、情報を共有してもらいやすいようにシェアボタンをページに置いています。 シェアボタン 現状はTwitterやFacebookなど各サービスごとにシェアボタンを用意していますが、 モバイルに於いてはWeb Share APIを使っても良い状況ではないか？ と思って調べてみました。 ちなみにCan I use... ではこんな感じです。 Can I use ... Web Share API スマホに限るとiOS SafariもAndroid Chromeもサポートしているようです。 モバイルでは使えそう?! コード とりあえず、試すためのページを用意をしないと、ということで Web Share APIを使ったシェアボタンだけのページを作りました。 コードは次の通りです。 <html lang="ja"> <head> <meta charset
モーダルダイアログを視覚表現だけで終わらせない - Web Accessibility Advent Calendar 2013 - neotagの雑文
Web Accessibility Advent Calendar 2013 初日です。 http://www.adventar.org/calendars/64 neotagです。初日なのに記事公開が遅れてしまいました。 しょっぱなから出鼻をくじいてしまい大変申し訳ありません。（土下座） 追記 2013/12/06 この記事の補足になる記事を @milk54 さんが書いてくださいました。 リニューアルして情報が得られなくなったというサイトを調べてみた 追記ここまで JavaScript による視覚表現が盛んになってから当たり前に使われるようになったモーダルダイアログについてです。 このモーダルダイアログ、ちょっとした情報を追加で表示する際に大変便利なのですが、見た目だけ実装すると思わぬ罠があります。 普通に組んだ場合 Library など使わずに普通に JavaScript を書いた場合
favico.js
favico.js v0.3.10 Make use of your favicon with badges, images or videos View on GitHub Try it: +1 -1 Set icon Play video Start webcam Reset Works on Chrome, Firefox, Opera and IE11+ Badges Animate your favicon with animated badges. You can customize type of animation, position, background color and text color.
スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
JavaScriptでブラウザコマンドラインを実装する：CodeZine
去る8月30日（土曜日）、ライトウェイトプログラミング言語（Lightweight programming Language）の総合カンファレンス「LL Future」が、なかのZERO（中野区もみじ山文化センター）大ホールで開催された。当日は前線の影響で時おり豪雨に見舞われる中、さまざまな言語のユーザーや開発者など千人近くが集まった。
WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」:phpspot開発日誌
WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」 2007年04月20日- Handling Keyboard Shortcuts in JavaScript Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. WEBアプリに超絶簡単にJavaScriptのキーボードショートカット機能を実装する「shortcuts.js」。 次のように定義することで、Ctrl+Shift+Xのショートカットキーが押された際の機能を実装できます。 shortcut(
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
JavaScript で日本語の変換途中の文字列を取得する
■ JavaScript で日本語の変換途中の文字列を取得する input form に onKeyDown とか指定してイベントを受け取るようにすると、現在入力している文字列が取得出来るわけですが、残念ながら日本語の変換確定前の文字列は IE でしか取得出来ません。 しかし setTimeout の処理とかを使えば IE 以外のブラウザでも取得出来るのですが、このやり方について解説している人を見掛けた事が無いので紹介しておきます。ええ、まぁ、実際にそんな事がしたい状況ってのはあんまり無いんですけどね。JavaScript で自動フリガナ入力 ってのを見たら、やっぱり onKeyDown のせいで IE 以外のブラウザには非対応っぽいので Firefox 対応版になったら嬉しいなと思ったもので。 それで肝心のやり方ですが、実際にサンプルを見た方が早いと思うので、以下に用意しました。何も難し
テキストエリアとかリサイズ可能にする JavaScript
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Joelb.me