サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
mashimonator.weblike.jp
画像を一括でリサイズする Photoshop用 スクリプトを作成しました。 複数のファイルのサムネイルを一括で作成したい場合などに便利です。 前回のエントリ と同様に、既に色々なところで同じようなスクリプトが出回っていますが、 Photoshop用 のスクリプトは作ったことがなかったので、自分の勉強も兼ねて作ってみました。 こちらも "Web及びデバイス用に保存" にはまだ対応していないので、後日改めて機能を追加する予定です。 DOWNLOAD 仕様の簡単な説明 選択されたフォルダ内にある画像ファイルを一括で指定されたサイズに変換して保存します。 変換後の画像は、選択されたフォルダ内にサブフォルダが作成されてその中に保存されます。 画像サイズは、変換処理前に指定された最大幅と最大高さにしたがってリサイズされます。 (画像が横長の場合は幅を、画像が縦長の場合は高さを、それぞれ基準にして、最大
今回は Web Notifications の簡単なサンプルをつくってみました。 Web Notifications Web Notifications はユーザーのデスクトップに通知を表示することができる API で、 (Win で例えると、タスクトレイにバルーンが表示される感じ) 現在策定中の仕様ですが、正式勧告されて各ブラウザで実装されれば、 ユーザーが他のサイトを閲覧している、若しくは、ブラウザを最小化しているなどの状態でも、 Webサイト・アプリケーション側からユーザーに対して通知を表示することができるようになります。 Web Notifications のデモ 簡単なサンプルを作ってみました。 DEMO 2013年8月末時点で、Chrome28・Firefox23 にて動作確認 デモページの"通知"ボタンをクリックすることで、タスクトレイの上にサイトからの通知が表示されます。
javascript でテーブルの特定行の表示を切り替える処理を書いている時にハマりそうになったのでメモする。 FireFox、Safari、Chromeなどでは、CSS で tr要素 に display:block; を指定すると表示が崩れてしまうが、javascript でも当然同じことが言える。 javascript で要素の表示/非表示を切り替える際は、display プロパティを none から block(またはその逆)にして制御するケースが多いが、tr要素 を操作する場合に同じことをすると、上記理由からテーブルの表示が崩れてしまう。 tr要素 の表示を切り替える場合は、以下例のように table-row を使用するか、display プロパティを空にする。 element.style.display = 'none'; // 非表示 element.style.display
以前作成した「[JavaScript] ファイルのサイズを自動で取得して表示する2」のライブラリを更新しました。 DEMO DOWNLOAD 変更点 IE9でスクリプトエラーが出るバグを修正 特定のクラス名を持つa要素のみに適用できるように機能追加 使い方 ZIPファイル を解凍後、JSファイル を任意のディレクトリに配置し、本機能を実装したい html で JSファイル を読み込む。 <script type="text/javascript" src="js/fileSizeGetter.js"></script> 次に、JSファイル をテキストエディタなどで開き、各設定項目をサイトに合わせて変更する。 使い方の詳細は DEMO をご参照ください。
ちょっと前から気になっていた WebRTC を簡単に試してみました。 WebRTC WebRTC は Web RealTimeCommunication の略で、ユーザーのWebカメラやマイクから動画や音声のデータをリアルタイムで取り込んだり、端末間でP2Pを行えるようにするための仕様で、現在 W3C によって標準化が進められています。これまではWebブラウザからWebカメラにアクセスするためには Flash を利用する必要がありましたが、これらを利用することで JavaScript から同様のことができるようになります。 ※以降のデモは全てWebカメラが必要です。 Webカメラの映像を video要素 に表示する まずは一番簡単なサンプルを作ってみました。 DEMO 2013年3月時点で、Chrome27.0にて動作確認(Androidでも動くかも...) まずは一番オーソドックスに、W
作った当時の自分の色々な怠慢が発覚したため色々と修正しました。 できることは前と変わってません。 DEMO DOWNLOAD 使い方 ファイルの読み込み ZIPファイルを解凍後(中身はlazyload.jsとblank.gifのセット)、各ファイルを任意のディレクトリに配置し、 本機能を実装したいhtmlでJSファイルを読み込む。 <script type="text/javascript" src="js/lazyload.js"></script> 基本的にはこれだけでOKです。 特定クラス名を持つ img要素 のみに適用したい場合は以降を参照してください。 クラスの指定 img要素 に特定のクラス名を持つ場合のみ遅延ロードの対象とする場合は、 遅延ロードの対象とする img要素 に適当なクラス名を付加します。 <img class="lazy" src="img/sample.png
フリガナを自動挿入するライブラリを更新しました。 DEMO DOWNLOAD ご使用の前に 既知の問題点 をご一読ください。 変更点 ちょっと使い易いようにしました。 使い方 ファイルの読み込み ZIPファイルを解凍後、jsファイルを任意のディレクトリに配置し、本機能を実装したいhtmlで読み込む。 <script type="text/javascript" src="js/kanaTextExtension.js"></script> JavaScriptの設定 次に本ライブラリを使用するHTML内で、対象とするinput要素のname属性と文字種・入力形式をセットする。 設定の記述は本ライブラリの読み込み箇所以降であればhead要素内でもbody要素内でも構いません。 <script type="text/javascript"> kntxtext.target.push( //[
フォーム入力の際に、名前とセットでカナ入力項目が付いてくるケースは少なくない。 しかし、この入力が結構面倒くさいので、それを自動化するライブラリを作成した。 DEMO DOWNLOAD 同様の機能を持つライブラリは既にメジャーなものが出回っているが、それらはユーザの名前の入力に合わせて勝手に(自動で)カナ入力される場合が多い。自動で入力された方が確かに見映えはいいが、その場合には、ユーザの意思に関わらずカナが入力される点と、入力されたカナが間違っていた場合に、逆にユーザがそれを消す手間が発生する可能性があり、賛否両論ある所だと思う。 そこで、本ライブラリでは入力形式を 自動/チェックボックスの選択式(デフォルトチェック有り・無し)/ボタン押下による挿入 の4パターンから選択して設定できるようにした。チェックボックスやボタンはjavascriptにより自動で挿入される。 使い方 ZIPファイ
以前から「PageSpeed」 にやれやれと言われ続けていたのと、 "PageSpeed" の Chrome版 がリリースされたのもあるので、ページの表示速度を改善するために色々やってみました。 やったことを簡単に書き留めておきます。 リソースの圧縮 一つ目は、gzip や deflate を使用したリソースの圧縮です。 リクエストされる各ファイルの容量を圧縮することで転送量を減らし、速度改善につなげる施策です。対象のファイルを一個ずつ gzip 圧縮するのが面倒臭かったので、今回は apache の mod_deflateモジュール を使用して対応しました。 mod_deflate 具体的には .htaccess ファイルに以下の記述を追加しました。 SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4 gzip-only-text/html B
「葛藤」 What's New AptanaStudio で Haxe の環境を構築して、HelloWorldするまでの流れを備忘録としてメモします。 ... Qiitaのお試しがてらに、現状の Product Advertising API を PEAR の Services_... 今回は Web Notifications の簡単なサンプルをつくってみました。 Web Notifications W... ちょっと前から気になっていた WebRTC を簡単に試してみました。 WebRTC WebRTC は Web RealT... サイトへの広告表示につきましてご報告です。 この度、諸事情によってサイト運営のための費用の捻出が以前ほど楽ではない状態と...
お気に入りに登録ボタンを押した時にブラウザのお気に入り登録ダイアログを表示するライブラリを作成した。お気に入りに登録ボタンの実装の度にいちいちブラウザ判定処理まで作成するのが面倒臭いので・・・ DEMO DOWNLOAD 仕様 メソッド呼び出し時にブラウザ判定を行い、JSによるお気に入り登録に対応していれば登録ダイアログを表示する。対応していない場合はブラウザのメニューから登録する旨を伝えるメッセージを表示する。 使い方 ZIPファイルを解凍後、中身をサーバの任意のディレクトリに配置し、本機能を実装したいhtmlでJSを読み込む。 <script type="text/javascript" src="common/js/bookmark.js"></script> 登録ボタンの onclick イベントなどで、bookmark() メソッドを呼び出す。 <input type="butt
[JavaScript] createElement したチェックボックスの checked属性 の指定が IE6 で反映されない これはかなりメジャーな話だと思いますが、 過去のライブラリを修正していて対応していないモノを発見してしまったので自分への戒めとして。 IE6 で想定した動作をしない例 JavaScript で デフォルトでチェックが入っているチェックボックスを生成する場合、 次のようにすると IE6 ではデフォルトチェックが入らない。 var input = document.createElement('input'); input.setAttribute('type', 'checkbox'); // [or] input.type = 'checkbox'; input.setAttribute('checked', 'checked'); // [or] input
だいぶ前に 高津戸さん もブログに書いていましたが、 マークアップする時にちょいちょい忘れてしまうので備忘録として。 Firefox での tr, th, td要素 の扱い Firefox では tr, th, td要素 の display プロパティに対する position:relative; の指定が定義されていません。 (「Firefoxでは」というよりは、CSS2 の仕様上そうなっているのだが) つまり、例えば td要素 に position:relative を指定し、そこを基点にして何かの要素を position:absolute で配置するといったスタイルは Firefox では無視されます。 サンプル かなり強引な例ですが、 次のようにトピックスかなにかの表組を組むとします。 <!-- HTML --> <div> <table> <tr class="new"> <th
ブログなどに YouTube の動画を埋め込みたい場合は良くあると思いますが、 動画のページで発行されるコードをそのまま HTML に埋め込んでも z-index が効きません。 なので、例えばこのサイトのようにヘッダーやフッターを position:fixed にしていたりすると、 固定されている要素より iframe要素 の部分の方が前面に表示されてしまいます。 解決方法 そこで、その解決方法ですが、 例えば YouTube で次のコードを発行したとします。 <iframe width="420" height="315" src="http://www.youtube.com/embed/OX0-8kQnWt4" frameborder="0" allowfullscreen></iframe> 動画は僕が大好きな「GAGAKIRISE」というバンドです。 このままでは前述したような
htaccess によって特定ファイルへアクセスされた際にリダイレクトを掛ける。 テンプレートファイルなど、直アクセスされたくない(プログラムからしか遷移させたくないような) ファイルに対して使用する。 Options +FollowSymLinks RewriteEngine On Redirect permanent アクセスを制限したいファイル リダイレクト先URL ※「アクセスを制限したいファイル」にはドキュメントルートディレクトリからのパスを指定する。 以下、ドキュメントルートディレクトリ直下に配置されているシステムエラー画面に直アクセスされた際に google.co.jp へリダイレクトするサンプルソース Options +FollowSymLinks RewriteEngine On Redirect permanent /error.html http://www.goog
このエントリは ライブラリ へ移動しました。
Web Storage を使用して、クライアントサイドにデータを保存する簡単なメモアプリのサンプルを作成してみた。 尚、メモの編集部分の動作には、リッチテキスト編集用APIを使用している。 DEMO1 - localStorage DEMO2 - sessionStorage また、上記サンプルと前回紹介した アプリケーションキャッシュ を組み合わせたVerも作成した。 DEMO1 - localStorage DEMO2 - sessionStorage 2010年10月時点で、IE8.0、Firefox3.6、Safari5.0、Chrome6.0にて動作確認 あまり作りこんでいないので、Firefoxではリッチテキスト編集用APIの動作が少しおかしくなることがある Web Storage とは、クライアントサイド(ブラウザ側)にデータを永続的に保存するための仕様で、オフラインWebア
アプリケーションキャッシュを使用して、オフライン(ネットワークに接続されていない)環境でも閲覧ができるページのサンプルを作成してみた。 DEMO1 DEMO2 2010年10月時点で、Firefox3.6、Safari5.0、Chrome6.0にて動作確認 アプリケーションキャッシュとは、Webアプリケーション を構成しているすべてのリソース(HTML/CSS/JavaScript/画像ファイル)をローカルにキャッシュしておくことで、ユーザがネットワークに接続していなくても Webアプリケーション を利用できるようにするための仕様である。 demo1 は、アプリケーションキャッシュの最もスタンダードとなる使用方法の例で、オンラインの状態で1度 demo1ページ へアクセスすれば、(この時、Firefoxの場合はページ上部に「このサイトはオフライン作業用データの保存を求めています」というメッ
ドラッグ&ドロップ(DnD)API と ファイルAPI を利用して、ローカルPC上にある画像ファイルをブラウザの特定領域にドロップすると、その内容をサイト上に表示する簡単なdemoを作成してみた。 DEMO 2010年10月時点で、Firefox3.6、Chrome6.0にて動作確認 DnD API ドラッグ&ドロップという操作自体は、JavaScript を駆使することで既に Webアプリケーション 上で実現されているが、あくまで擬似的に実現しているに過ぎず、よりデスクトップアプリケーションに近い UI を提供するには限界があると思われる。そのため、HTML5 では、ドラッグ&ドロップに特化したイベントや API を新たに仕様として規定している。 File API また、ドラッグ&ドロップAPI と深く関連する API として ファイルAPI がある。 ファイルAPI を使用することで、
javascriptライブラリを作成していて、あれ動かない?と思うとこれが原因の事が未だにあるため、忘れないようにメモしておく。 IE6,7では、getAttribute と setAttribute を使用して、class 属性や style 属性などを操作できないバグ(IEの仕様)がある。 以下、一部の例を記載する。 element.setAttribute("class","○○○"); → element.setAttribute("className","○○○"); element.setAttribute("style", "○○○"); → element.style.cssText = "○○○"; element.setAttribute("maxlength", 5); → element.setAttribute("maxLength", 5); element.s
htaccess によって特定のIPアドレス以外のアクセスをリダイレクトさせる。 管理画面やテスト中のサイトに対してBasic認証と併用して用いることで、より厳重なアクセス制限にすることができる。 order deny,allow allow from IPアドレス deny from all ErrorDocument 403 リダイレクト先URL 「リダイレクト先URL」はユーザが用意したエラーページも指定可能 その場合は、該当部分にrootディレクトリからファイルまでのパスを指定する
次のページ
このページを最初にブックマークしてみませんか?
『Development Reference』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く