「https://」で始まるページでブックマークレットが動作しない理由
「https://」で始まるページでブックマークレットが動作しない理由を調べてみました。 １．問題点 はてなブックマークでブックマークをするときには、いつも公式のブックマークレットを使っています。 が、「https://」で始まるページではこのブックマークレットが動作しない場合があります。 FirefoxやChromeでこの現象が発生します。 ブックマークできない代表的なURLはTwitterやFacebookなどです。 なお、「https://」で始まるすべてのページでブックマークレットが動作しないという訳ではありませんし、ブックマークレットによっては動作するものもあります。 ２．原因 調べてみたところ、ChromeやFirefoxでは「Content Security Policy」というものに対応しているためのようです。 「Content Security Policy（CSP）」は
jQueryでスクロールでトップに「戻る」リンクを表示する「PageTop」プラグイン
jQueryでスクロールでトップに「戻る」リンクを表示する「PageTop」プラグインを公開します。 １．機能 ページのスクロールで右下に「戻る」を示すアイコンを表示します。 また、フッター部分が出現するとアイコンはフッターに固定されてスクロールします。 下記にサンプルを用意しました。 サンプル サンプルをスクロールすると、通過するsection要素に対応するサイドメニューの該当項目を反転表示します。 ２．プラグインのダウンロード 下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.pagetTop.js」にリネームしてください。 jquery.pageTop_0.0.1.js 以下、設定方法です。 ３．HTML body開始タグ直後に下記のdiv要素を追加します。 <div id="relative"> また、トップに戻るためのリンクをbody終了タグ直前に次のよう
jQuery.ajax()のまとめ
jQuery.ajax()について逆引きリファレンスっぽくまとめてみました。 まとめた理由は、ネットで「jQuery.ajax」や「jQuery.ajax サンプル」などで調べても、いい感じの内容がなかなかヒットしないことと、よくヒットするサイトの情報が古かったりする（1.4で止まっているとか）ためです。 ということで、2012年10月現在2014年10月現在の「jQuery.ajax()」などをざっと調べて作ってみました。 初心者向けの内容です。すべてのオプションは網羅できていません。とりあえずサンプルコードがほしい方は１５項をご覧ください。 若番から必要と思われるものを順番に並べているつもりですが、後半は適当です。また、各項のサンプルはなんとなく積み上げていく感じにしています。 調べている間にも3つくらい新しい発見（といっても古い情報ですが…）があり、jQueryが日々進化していること
入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
「file:///」でスラッシュが3つ並んでいる理由
ブラウザにテキストファイルや画像ファイルをドラッグるすと、テキストや画像が表示され、URLが「file:///」で始まるのは皆さんご存知かと思います。 Windowsであれば、「file:///」「file:///C:/」と入力すれば、エクスプローラーのような表示を行うこともできます。 で、「何でスラッシュが3つ並んでるんだろう？」と疑問に感じていたものの、「まぁそういうものなんだろう」と、ほったらかしにしていました。 ということでこの疑問を解消すべく、「file:///」について真面目に調べてみました。 １．「file」について まず「file」は、ホストコンピュータ上でアクセス可能なファイルを示すもので、RFC1738（URL仕様）の3.10に以下の記載がありました。 3.10 FILES The file URL scheme is used to designate files a
フォームの<input type="file" />の値をjQueryでリセット（クリア）する方法
フォームの<input type="file" />の値をjQueryでリセット（クリア）する方法を紹介します。 １．問題点 フォームの値をリセット（クリア）する場合、通常はtype属性が「reset」のボタンですべてクリアできます。<input type="file" />の値も同様にリセットされます。 HTML <form id="bar" action="foo.cgi"> <input type="file" /> <input type="reset" value="リセット" /> </form> サンプル1 JavaScript（jQuery）でリセットしたい場合、次のように記述すればいいように思われます。 HTML <form id="bar" action="foo.cgi"> <input type="file" id="file" /> <input type="bu
リターン（Enterキー）でフォームを送信しない方法
フォームのテキスト入力中にうっかりリターン（Enterキー）を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。 ということで、リターン（Enterキー）でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。 １．リターンでフォームが送信される原因 次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。 <form action="hoge.cgi"> <input type="text" name="foo" /> <input type="text" name="bar" /> <inp
JavaScriptで現在時刻や今日の日付を取得・表示する
JavaScriptで今日の日付や現在時刻を取得・表示する方法です。 毎回同じものを作っているような気がするのと、JavaScriptのビギナーの方むけの情報という意味で、このエントリーで動作サンプルを掲載しておきます。 １．現在日時を取得するサンプル 現在日時を取得するサンプルを以下に掲載します。このサンプルをウェブページに丸ごとコピー＆ペーストすれば、サンプル下にある「出力結果例」の表示になると思います。 <script type="text/javascript"> var get_current_timestamp = function() { var weeks = new Array('日', '月', '火', '水', '木', '金', '土'); var d = new Date(); // 年月日・曜日・時分秒の取得 var month = d.getMonth()
jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説
jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。 ThemeRoller こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。 このエントリーで紹介する情報は2011年12月のものです。 １．ThemeRollerへのアクセス方法と全体レイアウト jQuery Mobileのトップページにある「Themes」をクリック。 ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。 冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べるこ
Google ChromeでGoogleリーダーのスタイルを元に戻す方法
Google ChromeでGoogleリーダーのスタイルを元に戻す方法について紹介します。このエントリーは、昨日の「Googleリーダーのスタイルを元に戻すFirefoxアドオン「Stylish」とユーザースタイル「Old styled Google Reader」」のGoogle Chrome版です。 このカスタマイズを行えば、Google ChromeでGoogleリーダーを閲覧するとき、以前のスタイルに近い表示に戻すことができます。余白も改善されます。 適用前 適用後 １．「Chrome Stylist」拡張機能のインストール 「Chrome Stylist」はユーザースタイルを管理するための拡張機能です。この拡張機能にユーザースタイルを追加することで、特定のサイトに対して独自のスタイルを適用することができます。 「Chrome Stylist」のサイトにアクセスして「CHROME
jQueryでテーブルに行を追加する方法
jQueryでテーブル（table要素）に行を追加する方法を紹介します。 テーブル操作は、テーブル系のjQueryプラグインで色々なことが実現できると思いますが、業務で使っているツールでこの機能がピンポイントで必要になったため自力で作りました。 単に追加するだけであれば後述するappend()とprepend()で大丈夫です。ただアニメーション表示する方法についてはネットで色々探しましたが同様の情報がなかったので試行錯誤して作りました。テーブルを操作する場合の参考になれば幸いです。 １．サンプル まずはサンプルで動作をご確認ください。 jQueryでtableに行を追加するサンプル サンプルでは行の追加・削除・全削除が行えます。 ２．テーブルの先頭に行を追加する 行をtable要素の先頭に追加するには次のように記述します。 $('tbody').prepend('<tr><td>～</td
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
