jQueryによるaタグリンクアドレスへのディレクトリ挿入処理

スマートフォン閲覧用のWebサイト制作にあたって、 「/sp/」などと命名したディレクトリを立て、 ルート「/」のPC版と一対一で対応させた上でスマートフォンからのアクセスの場合には スマートフォン専用ページを表示させるのは以前は一般的な手法でした。 現在ではレスポンシブWebデザインが主流となり余り見られなくなった手法ではありますが、 当該手法を採用したWebサイトのメンテナンスに於いては PC版との整合性を取る必要に迫られる事案もあります。

 

例えばブログシステムに於いて一般の利用者が記事投稿する際に 内部リンクを記載すればPC版にリンク先を求めるのは当然でしょう。 すると然るべきリダイレクトが施されていない場合には スマートフォンで当該サイトを訪れた閲覧者はPC版リンクを踏みますから 折角用意したスマートフォンページは表示されはせず、 一般的に横幅の広い、従って小さな文字のページの閲覧を強いられる格好になってしまいます。

其処で問題のあるリンクに於いては スマホ版での巡回に支障をきたさない様に配慮し、 PC版のリンクアドレスをリンク時に改変して「/sp/」を先頭に挿入したい要請があります。 本記事では此の実現にjQueryを用いて解決を図りたく思います。

"jQueryによるaタグリンクアドレスへのディレクトリ挿入処理" の続きを読む

「最近の記事」リンクの行毎に背景色を変更する

本ブログでは3カラムのレイアウトで左サイドバーには 最近の記事 を30件表示しています。 閲覧者の利便を考え、目に留まり易い箇所に記事へのリンクを大量に置き、 興味のある記事が見出だし易くなるだろうと考えてのレイアウトです。 これは姉妹ブログ HamaZoランクチェック!Blog の2011年5月1日 姉妹ブログの全体幅の拡張 に書いた様に当該ブログをモデルにしてブログ間の統一性を図ろうというものでもあります。

ところが意に反してリンクが長々と同じ状態で続く為に、 返って閲覧性の低下を招いているのではないかと感じました。 そこで対処法として…

"「最近の記事」リンクの行毎に背景色を変更する" の続きを読む

数式表示サービスCODECOGSを手軽に扱えるjQueryプラグイン

数式をホームページやブログ内に表示するには なかなか煩わしい問題が付き纏います。 その手間を軽減してくれるWebサービスの存在として、 本ブログの2011年5月16日の記事 Web(HTML)頁内への数式の表記~CODECOGS で紹介したのが CODECOGS でした。 更にこのサービスを利用し易くする jQueryプラグイン が存在し…

"数式表示サービスCODECOGSを手軽に扱えるjQueryプラグイン" の続きを読む

目的要素の直前に挿入するjQueryメソッドbefore()

本ブログ2011年4月6日の記事 jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法 で書いた様に Twitter API にjQuery.ajaxメソッドでアクセスすれば 簡単につぶやきのXMLファイルを得ることが出来ます。 そうとなれば得られたXMLファイルから必要な要素を抽出し 思い描いた通りにブログ画面上に表示したくなろうというものです。 上記記事では数与えられた中にも要素は本当につぶやきのみ、 text 一つしか使用していませんでした。

其処で今回、ユーザーアイコンのURL情報の user.profile_image_url と、 ユーザー名 user.name 、ユーザープロフィール user.description 、またつぶやいた時間情報である created_at の三つも併せて表示しようと思い立った訳ですが…

"目的要素の直前に挿入するjQueryメソッドbefore()" の続きを読む

jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法

日経ソフトウェア2011年5月号 に短期集中連載 JavaScriptステップアップ講座 の最終回として jQueryajaxメソッド を用いて twitter からつぶやきを取得する記事が載っていました。

twitter は最早インフラとして認知され始めていますし、 jQuery も興味を大いに抱いていますので、 早速掲載スクリプトを少し変えて、 本ブログにも実装してみました。

"jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法" の続きを読む

ブログ記事の中のWebカメラで自分撮り

様々な機能をWeb上、延いてはブログ上で提供してくれる jQuery ですが、 FLASH と連携してWebカメラを制御するプラグインが登場しました。 jQuery webcam plugin 上記リンク先で詳細の説明され、 必要ファイルをダウンロードすることが出来ます。

ダウンロードしたスクリプトを読み込んだら、 以下の様なスクリプトを記述してやるだけでブログ上で機能します、たったこれだけ。

$("#camera").webcam({
   width: 320,
   height: 240,
   mode: "callback",
   swffile: "/download/jscam_canvas_only.swf"
});

論より証拠、 この記事内に「許可」を求めるフラッシュのダイアログを内包した画面が表示されていると思いますので、 先ずは許可してみて下さい。 繋がれたWebカメラの画像が見事に表示されると思います。 近年ネットブックでもモバイル型のPCにはWebカメラが標準装備されていますので、 その様な機種であれば試しやすいのではないかと思います。

"ブログ記事の中のWebカメラで自分撮り" の続きを読む

ブログ記事タイトルを変化させられるプラグイン

有名ブロガー yamada さんの運営する『 ITquality 』2011年3月5日の jQueryでテキストサイズのスライドバーを作成するチュートリアル 記事に興味が沸いたので早速紹介サイト How to Control Text Properties using jQuery and UI Slider 及び LIVE DEMO を拝見の上、サンプルを拝借し、 本ブログにも実装してみました。

"ブログ記事タイトルを変化させられるプラグイン" の続きを読む

ニコニコ動画みたいに動画の上にコメント出来るプラグイン

ニコニコ動画って今はあまり見ないんですけど、 その開設時は入力したコメントが画面を流れて面白かったのを覚えています。 本ブログ運営者が見る見ないに関わらずニコ動の人気は不動の様ですね。

今はニコ動は自前のサーバーに動画を保管している様ですが、 その創成期には YouTube から動画のデータは引っ張って来ていたと聞きます。 動画に付いてはそんな旧タイプの手法を、 そしてそれに重ねるコメントに付いてはニコ動の様に Flash を用いるのではなく、近年の主流となっている Ajax 、その中でも jQuery のプラグインとして実現しているブログ記事が公開されていました。 それが Text on YouTube
- YouTube動画上にテキストを表示するプラグイン
になります。

矢張り、YouTube 動画の上をコメントが流れるのは見ていて面白いですよね。 ニコ動の人気も頷けます。 本ブログでも紹介されているプラグインを早速利用させて貰い、 本アーティクルに実装してみました。

"ニコニコ動画みたいに動画の上にコメント出来るプラグイン" の続きを読む

Google擬きパスワード強度チェッカー

ホームページを作る人のネタ帳の2009年3月9日の記事 導入が手軽なGoogleみたいなパスワード強度チェッカーJavaScript に紹介及び実際に使用したコードを掲載されるのが、 Code and Coffeの2007年6月26日の How to Make a Password Strength Meter Like Google に公開されたjavascriptにて実装さるパスワードの強度チェッカーにて、 ホームページを作る人のネタ帳記事を参考に当ブログにも実装して見たのが下になります。 "Google擬きパスワード強度チェッカー" の続きを読む

バーチャルキーボードでセキュリティアップ

当ブログにては2008年4月24日のアーティクル いもこじタイムスさんの「hamazoバトラー」 及び2008年4月25日のアーティクル mixi の規約改訂騒動とブログの著作権 でご報告は2008年4月22日以来の無沙汰で久し振りにお邪魔の いわたブログ村 in バーンビレッジ では3回目、ブログ村参加自体は遂に二桁突入の10回目にて講師はお馴染みの ダンディ☆和田 氏のレクチャーを拝聴するに主なテーマとしては、 hamazoブログのテンプレート機能の追加についてでしたので、 触れられた時間は僅かにて多少牽強付会の感もあるのですが、 キーボード関係、ソフトウェアキーボードも扱われた上での当アーティクル復習エントリです。

IDEA*IDEAの2008年10月25日の記事 jQueryでバーチャルキーボードを実現するチュートリアル の紹介記事に日本語で要諦は尽くされており、
またバーチャルキーボードを使いたいだけ!という人のためにソースをダウンロードすることもできますね。
とあることから早速リンク先は Design Shackの2008年10月22日の記事 Creating a Virtual jQuery Keyboard へお邪魔し、ダウンロードして当ブログへと利用させていただいた結果が下記表示となります。 "バーチャルキーボードでセキュリティアップ" の続きを読む