レスポンシブウェブデザインのサイトを作るときにほぼ使うjQueryプラグイン

JB20140820_01

調子にのって今回もレスポンシブのエントリーを書いた、JETBABY管理人です。
海行きたい。

・・・レスポンシブウェブデザインでサイトを作るときに、なにはなくともこれだけは使うというjQueryのプラグインの紹介です。

と、とりあえずスマホがある場合はjQueryは2系にしたほうが、動作が幾分か軽いのでいいですよ。
IE8はこのさい最低限のコンテンツが見えるだけくらいにしてね。
プログレッシブ・エンハンスメントですね。

さて本題。
jQueryを使えばレスポンシブなさいとでも色々な動きを出せたり、リッチな表現ができたりは当然できる。

ですが、今回はそういったものでなくレスポンシブの根幹部分で作用するプラグイン。
有名なので知ってる方も多いでしょうが、個人的にレスポンシブでjQueryといえばこれなので。

それは何かというと

breakpoints.js

こちらです。

何するものかといえば、ブレイクポイントごとにイベントを設定できるというもの。
設定したブレイクポイントになったら、またはブレイクポイントじゃなくなったら、という動作を設定できます。

使い方はダウンロード先のGitHubのReadMeをみれば英語が分からなくても使えるくらい簡単。

最初にbreakpointsの値に必要なブレイクポイントを設定。
enterBreakpoint~でその値になったとき、exitBreakpoint~でその値ではなくなったときの動作を記述。それだけです。

前回のレスポンシブのサンプルサイトのうちOff Canvasでこのスクリプトを使っています。
別に使わなくてもと思う程度の使い方ですが、640px基点にナビゲーションの表示非表示をしています。

使い方は色々思いつくと思いますが、レスポンシブ時の画像の変更などを紹介しているブログもあります。

実際に俺もPCとスマホで画像を変更するときなどに使用することもあったり。
まぁ、あまり画像変更するならレスポンシブじゃなくて別のHTMLにしなよ、とも思うのでどうしてもというとだけの使用にとどめていますが。

さて他に前回のサンプルでは要素の高さを揃えるのでメジャーなheightLine.jsのレスポンシブ対応版、jquery.heightLine.jsも使用しています。
本来前回のレスポンシブのサンプル程度ではなくてもいいのだけど、こっちもこのエントリーで軽くふれたかったので使った次第。

最初に書いたみたいに見た目を華やかにするようなjQueryでレスポンシブに対応したものもたくさんあるので、それらも必要に応じて使用するといいと思うのです。
スライダーとかメイソンリー系とかなんとか

まとめ記事的なのもあるので参考にしたり。
他にググちゃえばいくらでもあると思います。

しかし、今回紹介したbreakpoints.jsはレスポンシブやるときには8割くらいの確立で使いたいなと思うものなので、紹介しました。

便利ですよ。

一つだけ懸念があるとすればプラグインがぜんぜん更新されていないことくらいでしょうかね。

ページングをキーボードで操作するJavaScript&jQuery

Keyboard Shortcuts for Pagination

Keyboard Shortcuts for Pagination

めずらしく2日続けて連続投稿のJETBABY管理人です。
といっても今回は手短に言っちゃう感じで。

さてさて、ウェブサービスやらブログやらによくあるページング、ページャー。
それをキーボードで操作できるようにしちゃうスクリプトの紹介です。

Keyboard Shortcuts for Pagination

デモ

スマホ全盛のいまどき?とか思うかもしれませんが、場合によっては使えるかもと思うので紹介。
一般の人向けのサイトやサービスというより、PCがなくてはならない技術者なんか向けのサイトとかではキーボードで色々操作できるのはありがたいのではないでしょうか。

正直俺はありがたい。
なんだかんだで1日にPCに向かって作業している時間が多いので。

ページングをカーソルキーの左右で移動させたり2回早押しで一番前や後ろに移動できる感じ。
JavaScript版とjQuery版(1系も2系もOK)が用意されているのも親切。

使い方は書くほど難しくもなくサイトに詳しく出ているので割愛。

今回は、まだまだPCだって捨てたもんじゃないんだぜ、という思いの投稿でもありました。
そんなわけでKeyboard Shortcuts for Paginationの紹介でした。

それではまた。

スマホサイトに使いやすい軽量なシンプルなJavaScriptライブラリ

QuoJS

QuoJS

やたらお腹すいて困っている、JETBABY管理人です。いや、どうも。

今回はJavaScriptのライブラリのご紹介。

軽量かつシンプルかつスマホを考慮して作られている、QUOjs

フルサイズで30kbと軽く、タッチイベントが簡単に使えます。
Mobile Loverとサイトに書かれているくらいなので、スマートホンに最適化されているんだと思います。
うちにあるAndroidでもiPhoneでもうごいておりました。

使い方も簡単。
jQueryライクでもありつつ、jQueryとの共存も可能になっています。いいねぇ!

簡単なサンプルをさくっと作ったので、スマホでアクセスしてみてください。
タッチイベントが簡単に使えるのはいいです、ほんと。

http://www.jetbaby.net/quojs/

QRコードもつけときます。個人的にダイレクトにURL入力するの面倒なんで、みなさんにそんな手間をかけさせはしないよ。

QuoJS Demo QRcode

上記サンプルはPCでもタッチはクリック、スワイプはドラッグしながらマウス動かすで反応するようですが、他はうまく動きませんしスマホ向けなのでマウス操作は向いていません。

サンプルでは実行開始に

[javascript]window.onload = function(){
}[/javascript]

としていますがjQueryライクに

[javascript]$$(function() {
});[/javascript]

でも問題なし。$$と$がふたつなんですね、QUOjsの場合。

もちろんサンプルに載せた機能以外にもいろいろな機能がありますが、詳細は本家サイトをご覧ください。

このQUOjs、タッチイベントなどスマホ向けの部分を除けばPCサイトでも活用できますが、まぁそれならjQuery使うよね、慣れてるし。

しかしながらスマホサイトの構築には今後、選択肢として加えたいと思っています。

ではまた。

レスポンシブなソーシャルボタン - Ridiculously Responsive Social Sharing Buttons

JB2014041902

ブログの文体に悩んでいます。どうもJETBABY管理人です。

今回はレスポンシブで使えるソーシャル関連のボタンを設置するjQuery+CSS、「Ridiculously Responsive Social Sharing Buttons」のご紹介。SASSのファイルも同封されているのは個人的にはうれしいところ。

ダウンロードはGitHubのこちらから。

デモはこちらです。

WordPressのプラグインもあるようです。

推奨されてる画面サイズは140pxから15,465px。確認されてるブラウザはChrome 33、Safari 7.0.2、Firefox 27、Opera 20、IE9+となってます。

ちなみに表示のサンプルはこんな感じ

JB2014041901_01

使い方はGitHubからダウンロードしたファイルのうち、CSSフォルダをJSフォルダを任意の場所に。中身だけを好きな場所においてももちろんOK。

 使い方は
(ファイルのパスは適宜書き換えて)

まずCSSを呼び出して

[html]<link rel="stylesheet" href="css/rrssb.css" />[/html]

HTMLはこんな感じで

[html]
<ul class="rrssb-buttons clearfix">
<li class="email"> … </li>
<li class="facebook"> … </li>

<li class="googleplus"> …</li>
</ul>
[/html]

基本はラップする要素にクラスrrssb-buttonsをつけて、ここの要素にfadebookなどのクラスをつけてあげる感じ。
各ボタンの動作などは基本的にはそれぞれのサービスが推奨している方法なんかで、あとはデモファイルの中身に書いてあるのでそちらを。

最後にbodyの閉じる直前などでJSファイルをよんであげて終わり。

[html]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write(‘<script src="js/vendor/jquery.1.10.2.min.js"><\/script>’)</script>
<script src="js/rrssb.min.js"></script>
[/html]

GitHubのボタンなんかがあるので技術系ブログとかとも相性がいいのではないでしょうか。

レスポンシブでスマホもOKで軽量なLightBox系jQueryプラグイン

IMAGE LIGHTBOX

IMAGE LIGHTBOX

おはようございます。JETBABY管理人です。

今回はさらっと更新しちゃいます。

LightBox系のjQueryプラグインは色々ありますが、PCでもスマホでもきれいに動くのはあまり多くないですね。

今回紹介する「IMAGE LIGHTBOX」はレスポンシブ対応で最初かスマホを意識作られているプラグインになります。
iOSでもAndroidでも動きますし、日本ではあまりなじみないというか関係ないと思いますがWindowsPhoneでも動作します。
もちろんPCでも普通に動きます。
しかもminで4kbと軽量。

画像に特化しているので、iframeで別HTML呼び出したりなどの機能はないのが残念。
ですが、ギャラリー系や画像を見せたいコンテンツではありだと思います。

使い方はこちらのサイトから。

Demoはこちらからご覧ください。
スマホでもご覧ください。

JSONPでクロスドメインなお知らせリスト

JSONPでお知らせ

JSONPでお知らせ

どうもJETBABY管理人です。
今回はちょっとクリエイター気取りで少し前に使ったテクニックを紹介しましす。

クライアントさんによっては複数のサイト所有していて、でも簡単なお知らせはどのサイトでも同じものをだしたいなんてことがありますよね。
そんなときにつかったテクニック。

案件内容はこんな感じでした。

  • 複数のサイトのお知らせを一括更新したい
  • サーバーやドメインは別々の複数サイト
  • データベースは使わない

さて、どうしよう。

とりあえずCSVとかをjQueryで読み込んで書き出せばいいかなと、思ったのですがそういえばJSONってちゃんと使ったことないなと思ってJSONで作ろうと思ったわけです。

JSONは簡単に言うとJavaScriptベースのデータを扱うためのフォーマットです。
詳しいことはググってください。
で、JSONを呼び出して表示させる、これは大して問題もなくできたわけです。

さて、今回の案件においてJSONはどこかに一つだけおいて、それをいくつものサイトから呼び出すわけですが、これがうまくいかない。
基本的にJavaScriptを使って異なるドメイン間でデータの通信はできない。

さらに調べてみると解決法としてJSONPなるものが。
JSONP、基本はJSONですがクロスドメインでのデータの取得を可能にした形式。
関数にして呼び出すみたいな。
JSONがただのテキストなのに対して、JSONPはJavaScript。
JavaScriptは異なるドメイン間でも呼び出せますね。jQueryなんかをCDNで呼び出しているのと同じことです。
まぁこれは大雑把な説明なんで、その辺は詳しいエンジニアなんか聞いてみると吉ですね。

どんな構成で動作させたか例を挙げると

[サイトA]
├「フォルダ」
│├JSONPを取得して書き出すJavaScript
│└書き出す部分用のCSS
└JSONPの内容を実際に表示させるHTML

[サイトB]
├「フォルダ」
│├JSONPを取得して書き出すJavaScript
│└書き出す部分用のCSS
└JSONPの内容を実際に表示させるHTML

[サイトC]
└JSONPファイル

大体こんな感じで。
サイトCのJSONPファイルの中身を書き換えれば、サイトA、Bともにお知らせがかわると。

さらに利便性あげるのにはサイトCにJSONPファイルを編集する管理画面をPHPかなんかでで作ってあげればいいのですが、今回は割愛。
いちおう今回の動作サンプルも作ってみました。
http://www.jetbaby.net/jsonp/jsonp.html

さて各ファイルで何をやっているか。

先ずはJSONP。
サンプルではnews.jsonという名前で保存しています。

[javascript]
jsonpcall([
{
"date": "1月1日",
"contents": "これは私のブログです。<a href=’http://www.jetbaby.net’ target=’new’ rel=’nofollow’>JETBABY</a>"
},
{
"date": "1月2日",
"contents": "今回はJSONPについて書いています"
},
{
"date": "1月3日",
"contents": "とりあえず動いているがスマートとはいえないかもしれない"
}
]);
[/javascript]

単純に日付と内容をもったデータファイル。
項目は好きに増やせば他の使い方も可能でしょうが今回はこれで。
※データはこの記事用に適当書いたものです。

通常のJSONを関数でくくったような記述です。
jsonpcallの部分が関数名になるわけですが、ここは好きに変えて問題ないです。
※callbackとか書くことがが多いみたい。

次にJSONPを読み込んでHTMLにその内容を書き出すためのjQuery。
サンプルではload_news.jsという名前で保存しています。

[javascript]
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://JSONPファイルを置いた場所/ファイル名.json?callback=?",
dataType: ‘jsonp’,
jsonpCallback: "jsonpcall",
scriptCharset: "utf-8",
error: function() {
$("#newsWrap").append("<p>エラー</p>");
},
success: function(jsondata, datatype) {
$("#newsWrap").prepend("<strong>ニュース</strong>");
$("#newsWrap strong").after(‘<ul id="newsList">’);
for(var i in jsondata){
$("#newsList").append("<li><span>[" + jsondata[i].date + "]</span><p>" + jsondata[i].contents + "</p></li>");
}
}
});
});
[/javascript]

ajax関数でJSONPを取得しています。
他にも呼び出し方はあるんですが、試した中でうまく動いたのがajax関数だったのでこれで。

urlの部分でJSONPファイルの置いてあるパスを記述します。
最後についている?callback=?は必須です。
※ちなみにJSONPはサーバーが対応していない動かないようです。また?callback=?のcallbackの記述もサーバーによって違うことがあるようです。callback関数を指定するクエリなので、そのあたりのことを使うサーバーのマニュアルなんかで調べるといいと思います。

jsonpCallbackの部分ではJSONP内に書いてあった関数名を記述。

後はsuccess以降で取得したデータを好きなように表示してやります。
successの部分がJSONPをきちんと取得できたときにうごく部分ですね。

最後にHTML。
特に何かしているということもないです。

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="robots" content="NOINDEX,NOFOLLOW" />
<meta name="viewport" content="width=device-width;">
<title>JSONPテスト</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="loading_data/load_news.js"></script>
<link rel="stylesheet" type="text/css" href="loading_data/load_news.css" />
</head>
<body>
<div id="newsWrap">
</div>
</body>
</html>
[/html]

GoogleのCDNからjQueryを読み込んで、その後でさっきのjsを読み込ます。
jsなんかの保存場所は適当に。

あとは、jsと一緒にCSSを用意してJSONPを読み込んだ部分はどのサイトでも同じような見た目になるようにしていますが、これはなくても問題ないです、はい。

ということで複数のサイトで同じお知らせを表示する仕組みができました。
今後はJSONPだけ変更していけばいいので、更新が楽になりますね。

最後に注意しないといけないこと。
JSONPは基本的ただのテキストファイルなので、そのURLに直接アクセスすれば誰でも中身が見えます。
ということで重要な情報などは書かないほうが無難です。

この仕組み自体はセキュリティがしっかりしている訳でもないので、その辺を理解して適材適所で使わないといけないと思います。

Ajax通信は便利ですがセキュリティには気をつけないといけないですね。

そして、このサンプルを使って何か起こっても例によって責任は取れません。
もし使いたいなんて人がいたら、くれぐれも自己責任でお願いします。
※このプログラムを作成するに当たっていろいろなサイトを参考にしたのですが、作ったときはブログも再開していなく記事にする気もなかったので、覚えていません。すいません。
参考にさせていただいたサイトの皆様、ありがとうございました。

では今回はこのへんで。

文字列結合ツール(PHP版&C#版)

PHPとC#の文字結合ツールのイメージ

PHPとC#の文字結合ツールのイメージ

今年に入ってブログを再開して以来Venue8Proの話ばかり書いてきました。
しかしこのブログ、もとはといえばウェブやIT関連の覚書的なものにしようとはじめたもの。

ということで、少し前にですがプログラムの習作として作ったものを公開。

サイト制作の仕事でHTMLなんかを書いていると、こんなことがあると思います。
クライアントから送られてきた大量のリストをliタグで囲む、などということが。

多少なら手書きでもいいんだけど、数十行~数百行とかになってくるとさすがに面倒。
そんなときに活躍するツールです。

もとはといえば、昔いた会社で同じようなものを社内のプログラマーにリクエストして作ってもらったことがあるんですが、今はフリーランスの身。

自分のスキルアップもかねて作成してみた次第です。

ちなみに、エクセルをうまく使えば似た様なこともできるし、SublimeTxetとかのエディタでもやれないこともない。
のですが、とりあえず簡単に直ぐできるというのがこのツールのいいところかと。
行数が多いときにこそ使えるツールのはず。

で、簡単に使い方。

先ずはPHP+jQueryで作成したWeb版。
見た目はとりあえずBootStrapの2を使用。

http://www.firecolor.com/tools/text-attach/

PHP文字結合の画面

URLにアクセスするとこのような画面が表示されると思います。

「前にくっつけるテキスト」と「後にくっつけるテキスト」のインプットに自分でテキストを入れるか、下にあるセレクトボックスから選択。

「複数行のテキスト」となっているテキストエリアに必要な行をコピペ。

そして「くっつける」ボタンを押せばその下の青いエリアに結果が表示されます。

例えば都道府県をliタグで囲むとこんな感じに出力。

PHP版出力サンプル

後はコピペして作業しているエディタなりに貼り付けて使ってください。

やっていることは単純で、入力されたものをjQueryを使って処理するためのPHPファイルに送って、その帰ってきた処理された値をjQueryを使って表示させているだけ。
実際の文字列の操作をPHPで、データの受け渡しや表示をjQueryでやっています。
べつにPHPだけでもできるんですが、画面遷移というか全体の再描画なしで表示したかったのでそうなりました。

次にC#で制作したデスクトップ版。

同じページの下のほうにダウンロード用のURLがあるのでそちらからダウンロード。
もしくはこちらからでもできます。

http://www.firecolor.com/tools/text-attach/text_attach.zip

Zipで圧縮してあるので解凍してください。

解凍したフォルダの中のtext_attach.exeをダブルクリックして起動。

C#版文字結合

このようなウィンドウが表示されるので、あとはWeb版と同じに使ってください。

都道府県をliで囲むとこんな感じに。

PHP版出力サンプル

特にインストールの必要もなくレジストリなども使用していないなので、いらなくなったらフォルダごと捨ててしまえばOKです。

ということで、自分が使う&習作で作ってみたプログラムの公開でした。
使用は一切に責任を負えないので、自己責任でお願いします。
Web版はChromeでしか確認していないのであしからず。

今後も業務以外でもこういったものを作ってスキルアップしていければと思っています。