φ(..)メモとして残しておこう… -8ページ目
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 6 | 7 | 8 | 9 | 10 | 最初次のページへ >>

jQueryMobileでAjaxによるDOM追加後のプラグイン適用などなど。



jQueryMobileの便利なところは、「data-ajax="true"（デフォルト）」によるDOM追加の容易さだと思う。

で、よくハマるのが
追加したDOMにjQueryのプラグインが適用されない
という問題。


AjaxでDOMを追加する場合は、基本的に「追加する方のDOM」ではなく「追加される方のDOM」にプラグインを読み込んでおいたほうがいいので、注意が必要。

■追加元DOM
・jQueryMobile

■追加するDOM
・jQueryプラグイン


という構成ではなく

■追加元DOM
・jQueryMobile
・jQueryプラグイン

■追加するDOM
・純HTML


という構成にしておいて、DOMが追加されたタイミングでプラグイン及びjQueryMobileを適用する…という手順になります。

例えば、Ajaxで追加したDOMにページ遷移エフェクトで移動し、そこで「swipe.js」によるイメージスライダーを使いたい場合には、こんな感じになります。



--------追加元に記述------------------
<link href="/sp/plugin/swipe/style.css" rel="stylesheet" type="text/css"/>
<script src="/sp/plugin/swipe/swipe.js"></script>
<script>
$( '#page' ).live( 'pageinit',function(event){
  var slider = new Swipe(document.getElementById('slider'));
});
</script>

--------追加される方のDOM-------------

<div data-role="page" id="page">
    <div id='slider' class='swipe'>
        <ul style="margin:0;padding:0;">
            <li style='display:block'><div><img src="a.jpg"></div></li>
            <li style='display:none'><div><img src="b.jpg"></div></li>
            <li style='display:none'><div><img src="c.jpg"></div></li>
        </ul>
    </div>
</div>




要するに、DOMを追加してそこに何らかの操作を実行したい場合は
$( '#page' ).live( 'pageinit',function(event){
  DOM追加後に実行したい動作を記述
});

って感じで書けば(・∀・)ｵｯｹｰ!

…と思います。




公式ドキュメントによると

pageinitイベント
ページの自動初期化が終わる際に発火します。このイベントは、一般的なページにおけるDOM ready()イベントの代替として利用することが推奨されます。というのも、これはページが最初にロードされた際にも、Ajaxによるナビゲーションで読み込まれて他のページの内部にコンテンツが挿入される場合にも、機能するからです。

記述例
$( '#aboutPage' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});


とあるので、多分大丈夫かと。



今回はDOM追加後に、ページが構築された後のタイミングで適用だったので「pageinitイベント」を使いましたが、DOM追加後にページが構築される前のタイミングで適用…という場合には「pagecreateイベント」を使います。

$( '#page' ).live( 'pagecreate',function(event){
  ( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
});


こんな感じだそうです。


jQueryMobileのAjax機能を使う時は、こうしたイベント処理を細かく書いていく必要があるので、めんどくさい人は「data-ajax="false"」を使うといいかも。

イベント処理関係のjQueryMobile日本語リファレンスはこちらです。
http://dev.screw-axis.com/doc/jquery_mobile/api/events/


久々に撮影に行くことになりまして…。


昨日、久しぶりに撮影に行ってきました。

DTP関係…しかも夜系ということで（は、あまり関係ないか…）、深夜に撮影。

時間は午前3時半。
沖縄市にオープンしたばかりのガールズバーでの撮影です。

撮影機材が全くなく、借り物の『NIKON-D30』で撮影したのですが、久しぶりに見ましたよ『D30』を。
まだ現役で使ってる人が居るんだな…と思ったけど、現役で使ってないから貸してくれたっぽい。

ストロボとかないんで、さすがにf3.5～5.6の標準レンズじゃ暗いかな…ということで、レンズだけは友人から「f1.8・35mm単焦点」を借りました。


撮影した写真はこんな感じです。




あんまり撮影は得意ではないので基本的には外注ばかりなのですが、最近のDTP業界はどこも厳しくてぁメラマンに撮影を外注できない…ということで、デザイン担当が撮影をしなくちゃいけない訳です。

うーん…大変。


というわけで、早速広告デザインを…。




まあ、これはボツ広告なんですけどね。

このお店の広告は肩をはだけた浴衣の女の人をイメージで使っているので、僕がデザインしたやつはボツになるのは分かっているんです。

採用されるのはこっちの方。



個人的には、最初の奴の方が行きたくなるお店なんですけどね。
こんな女の子に癒されたい…とか思いつつ。


基金訓練の講師をしている時にも行ったのだけれど、商業デザイナーは「アーティスト」ではないので、クライアントの支持どおりの広告を作らなければいけないのです。


さて…。
週明けには入稿なんだけど、土日も休みはなさそう。



Webの方もやらなくちゃいけないし、今月は忙しすぎだな…。

さくらVPSにWebminを入れて、Webサーバー設定するときのやりかた（おさらい）



最近、サーバー設定はWebminばっかりでSSHを使うことがなくなってしまったわけですが、とりあえずWebminを入れるまではSSHも使ったりして。
最近多い、「さくらのVPSをWebサーバーとして使うときの設定手順」を自分用にメモ。

◆Webminのインストール



Termソフトでrootログイン
（個人的にはTeraTerm使ってます）


とりあえず、ゲットしてくる（現在のバージョンは1.580）
# wget http://jaist.dl.sourceforge.net/sourceforge/webadmin/webmin-1.580-1.noarch.rpm



rpmコマンドでインストール
rpm -ivh webmin-1.580-1.noarch.rpm


Webブラウザでhttp://***.***.***.***:10000にアクセス
（ターミナルソフトは接続したままで。）

webminにrootアカウントでログイン。
（最初にVPSのコントロールパネルでログインしたユーザー名・パスワードと同じです）

Webmin > Webmin Configuration で、とりあえず[Language]を日本語に。



◆ip制限をかける（TCP Wrappersの設定）



まずはsshdサービスのアクセス規制。

ネットワーク > TCP Wrappers > Denied hosts > Add a new rule.

Services:sshd
Remote hosts:ALL

で新規ルール作成。

「sshd」サービスについて「ALL（全ての）」リモートホストからのアクセスを禁止する…という設定です。
とりあえず、Termソフトをもういっこ立ち上げてアクセスできなければOK
このままアクセスできないのはアレなんで、Allowed hostsにアクセス許可ホストを登録します。

ネットワーク > TCP Wrappers > Allowed hosts > Add a new rule.

Services:sshd
Remote hosts:アクセスしたいipアドレス、もしくはドメイン
（***.***. とか .ocn.ne.jp とか途中までの入力でおK。自分のIPアドレスとかを入れる）

またまたTermソフトでアクセスしてみて、今度はアクセス出来ればおk。


アクセス制御の設定例

ALL : 192.168.0.1
適用サービス：全て
192.168.0.7 の IP アドレスを持つホストにのみマッチ。

ALL : 192.168.0.0/255.255.255.240
適用サービス：全て
192.168.0.0 にサブネットマスク 255.255.255.240 をかけた結果の 192.168.0.0 ～ 192.168.0.15 のホストにマッチ。

sshd : 192.168.
適用サービス：sshd
192.168.x.x の IP アドレスを持つホストにマッチ。

ALL : .example.com
適用サービス：全て
example.com ドメインに属するすべてのホスト（abcde.example.com や www.example.com）にマッチ。

sshd : *.example.com
適用サービス：sshd
example.com ドメインに属するすべてのホストにマッチ（上と一緒）。

◆EXCEPT（例外処理）の書き方

ALL: .example.com EXCEPT hack.example.com
適用サービス：全て
hack.example.com を除く、すべての example.com ドメインに属するホストにマッチ。

ALL EXCEPT sshd : 192.168.0.
適用サービス：全て
/etc/hosts.allow に記述すれば、sshd を除く全てのサービスへのアクセスを IP アドレス 192.168.0.x を持つホストに許可。



◆ユーザーの追加とパスワードの変更




システム > ユーザおよびグループ > ローカルユーザ > 新しいユーザを作成
「別のモジュールでユーザを作成しますか?」を[はい]にしとくと便利。

システム > パスワードの変更
でパスワードの変更が出来る。



◆各種モジュールのインストール



・Apache
Webmin > Webmin モジュール > www.webmin.com > 「apache」を入力して[ファイルからモジュールをインストール]ボタン。

Refresh Modules

サーバ > Apache Webサーバ > グローバル設定 > 設定ファイルの編集

「AllowOverride None」→「AllowOverride All」に変更（.htaccessを有効にする）

サーバ > Apache Webサーバ > 存在する仮想ホスト > デフォルトのサーバ > MIMEタイプ > 追加MIMEタイプ


タイプ / 拡張子

application/x-httpd-php .php
application/x-httpd-php .htm
application/x-httpd-php .html

を追加。



・MySQL
Un-used Modules > MySQL データベース サーバ
「The MySQL administration program package can be automatically installed by Webmin. Click here to have it downloaded and installed using YUM.」の「Click here」をクリックしてMySQLをインストール。（ver.5.1.6）

サーバ > MySQL データベースサーバ > [MySQL サーバを起動]

管理パスワードの変更 > 新しい管理パスワードを登録 > [更新]
ユーザの許可 > 新規ユーザーの作成 > 「ユーザ名,パスワード,ホスト,許可」を設定して[作成]

「匿名,root」は消したほうがいいかも。もし消した場合は

モジュールインデックス > で管理者IDとパスワードを再設定（先ほど新規で追加したユーザー）



・vsftpd
Webmin > Webmin モジュール > FTP またはhttp URL から > 「http://provider4u.de/images/downloads/vsftpd.tar.gz」を入力 > [ファイルからモジュールをインストール]

（サードパーティー製モジュールからのインストールが出来なくなってる…なぜだろう？）


システム > ソフトウェア パッケージ > Package from YUM > 「vsftpd」を入力して[インストール]

サーバ > Vsftpd > 「Could not find the vsftpd.conf file. Please check your Module Configuration.」の「Module Configuration」をクリック

The path and filename to vsftpd.confを「/etc/vsftpd.conf」→「/etc/vsftpd/vsftpd.conf」
Path where the virtual user will be storedを「/etc/vsftpd/vsftpd_user_conf」→「/etc/vsftpd/user_conf」
に変更して[保存]


サーバ > Vsftpd >Manual entries

#ascii_upload_enable=YES
#ascii_download_enable=YES
をコメントアウト

pasv_enable=YES
pasv_min_port=10100
pasv_max_port=10150
chroot_local_user=NO
を追加

Anonymous FTP > Anonymous enable:No
で匿名ログインを無効に


おまけ。
フォルダの権限を変更するUNIXコマンド（chown）

htmlフォルダ以下全てのファイルの権限を「webmage」に変更
　　　▼
「chown -R webmage html」


解凍コマンド
圧縮書庫形式拡張子解凍コマンド
TAR 形式＋GZIP 形式～.tgz, ～.tar.gzgzip -dc filename | tar xvf -
GNU tarが使える時(zオプションを使える時)
tar zxvf filename
LZH 形式～.lzhlha e filename
もしくは
lha x filename
ZIP 形式～.zipunzip filename
bzip2(BZ2) 形式～.bz2bzip2 -dc filename
もしくは
bunzip2 -c filename
TAR.BZ2(TBZ) 形式～.tar.bz2, ～.tbzbzip2 -dc filename | tar xvf -
y/z/I オプションを使えるtarコマンドを持っている時
tar yxvf filename
tar zxvf filename
tar Ixvf filename
tar.bz2、tbz2形式～.tar.bz2、tbz2tar -jxf filename
bzip2 -dc filename | tar xvf -
TAR.Z(TAZ) 形式～.tar.Ztar zxvf filename
もしくは
uncompress -c filename | tar xvf -
gzip(GZ) 形式～.gzgunzip filename
もしくは
gzip -dc filename
compress(Z) 形式～.Zuncompress filename
もしくは
compress -d filename
TAR 形式～.tartar xvf filename
ARJ 形式～.arjunarj filename




◆PHP関連インストール



PHP5.3のインストール。
システム > ソフトウェア パッケージ > Package from YUM > 「php」を入力して[インストール]ボタン。

最近まで「php53」でコマンドを入れなきゃいけなかったけど、どうやら正式にphp5.3がインストールデフォルトになった模様。

ほかにも入れておきたいPHP関係のモジュール。

php-mysql
php-mbstring
php-gd
php-pdo
php-pear




ここまでくるとApache/MySQL/PHPが使えるようになるのでLAMP環境でWebサービス開発ができるようになる…と。


画面スクロールに合わせてコンテンツを読み込む「jquery.lazyload.js」について。



画面の外にある画像データは読み込まずに、スクロールで表示エリアに来たときに読み込みのタイミングを持ってくる「jquery.lazyload.js（Ajax Lazyload）」。

結構画像をたくさん使ってるページ何かに使うと、ページの読み込みが早くなるので重宝します。

…が、バージョンアップしたのを知らずに、まだ古いバージョンを使っている人がいますね。


これ、古いバージョンを使ってると、読み込みのリクエストを２回してしまうのであまり（というか全然）意味がないわけですが、未だに使ってる人がいるんですよね…。

いままでは、こんな感じでよかったわけです。

<script type="text/javascript">
$(function() {
    $("img").lazyload(
        placeholder : "loading.gif",
        effect : "fadeIn"
    );
});
</script>



スクロールがそのイメージの場所に来るまでは、「loading.gif」を表示しておいて、イメージがブラウザの表示域に入ったら、<img>タグのsrc=""の中のデータと差し替える…ってやつです。


でも、最近のブラウザはイメージを読み込みに行っちゃうんですよね…orz


作者もそこんところに気がついたみたいで、新しいバージョンに変わってます。

最新バージョンでの記述はこう。
▼設定
$("img.lazy").lazyload(
    //200px先読み
    threshold : 200,
    //エフェクト
    effect : "fadeIn"
);

▼imgタグ
<img class="lazy" src="loading.gif" data-original="img/example.jpg"  width="640" heigh="480">


「data-original」にオリジナルの画像データを入れといて、「src」の中にはロードちう…の画像を入れときます。


最新版のコードを見たわけではないのですが、多分表示領域にタグが入ったら「$('img').attr('data-original')」でデータを取得して差し替える…という処理を行なっているものと思われます。


PC向けのページなんかではあまり使わなくてもいいプラグインかもしれないけど、スマホ向けページでは使いたいプラグインですね。


ちなみに、リストをフィルタリングするjQueryプラグイン「mobilyselect」と一緒に使う場合には「mobilyselect」のコールバックオプションにlazyload()の設定をしてあげてください。

scriptタグの設定
▼
$(function(){

$('#selecter').mobilyselect({
    collection: 'all',
    animation: 'fade',//アニメーション（plain, fade, absolute）
    duration: 300,     //速度
    
    //配置が終了したらjQuery-lazyloadを呼び出す
    onComplete: function(){
        $("img.lazy").show().lazyload();	    
    }
});

});

▼HTML
><img class="lazy" src="loading.gif" data-original="img/example.jpg"  width="640" heigh="480">



そのほかの詳しい使い方は、公式のドキュメントを見ることをオススメします。
　　▼
Lazy Load Plugin for jQuery


jQueryのプラグインに関しては、面白い動作のプラグインを使っているな…と思ったら、そのページのソースを覗いて、プラグインの名前を調べて公式ドキュメントを読む…という方法をとったほうがいいと思います。

結構ブログなんかで紹介されているわけですが、やっぱ公式ドキュメントが一番詳しいので。

僕のブログも参考までにしておいてくださいね。

jquery.prettyPhotoのTwitterボタンの投稿内容を変える。



要は、下記のTwitterのtextパラメータを書き換えるスニペットをどこに置くか…という問題。

//Twitterボタンの書き換え
// iframe要素とURLを取得
var TwitterFrame = document.querySelector('.twitter iframe');
var url = TwitterFrame.src;
                         
// 任意の文章のボタンを表示するURLを生成
var newUrl = url.replace(/([#&]text=)([^&]+)/, function(s, m1, m2) {
    return m1 + encodeURIComponent("書き換えたい内容");
});
                         
// URLを書き換え
elTwFrame.src = 'about:blank';
    setTimeout(function() {                             
        TwitterFrame.src = newUrl;
    }, 1);



「$('セレクタ').prettyPhoto()」でprettyPhotoを呼び出すときに「changepicturecallback」オプション（起動時に実行されるfunction）で設定すればいい様なので、
$("a[data-popup^='prettyPhoto']").prettyPhoto({
    changepicturecallback: function(){

        //ここに書き換え処理を追加

    }
});


ってことになるはずです。

たしかに、呼び出す内容が「画像」のときは動くんだけど、iFrameの場合に動いてない…orz


結局prettyPhoto.jsの「$pp_pic_holder.fadeIn(function(){…」の中に直接埋め込むことにしました。
iFrameのコンテンツ呼び出しなので、「case 'iframe'」の中に処理を追加です。

case 'iframe':
    pp_dimensions = _fitToViewport(movie_width,movie_height); // Fit item to viewport
				
    frame_url = pp_images[set_position];
    frame_url = frame_url.substr(0,frame_url.indexOf('iframe')-1);

//======▼追加
//Twitterボタンの書き換え
// iframe要素とURLを取得
var TwitterFrame = document.querySelector('.twitter iframe');
var url = TwitterFrame.src;
                         
// 任意の文章のボタンを表示するURLを生成
var newUrl = url.replace(/([#&]text=)([^&]+)/, function(s, m1, m2) {
    return m1 + encodeURIComponent("書き換えたい内容");
});
                         
// URLを書き換え
elTwFrame.src = 'about:blank';
    setTimeout(function() {                             
        TwitterFrame.src = newUrl;
    }, 1);
//=====▲追加ここまで

	toInject = settings.iframe_markup.replace(/{width}/g,pp_dimensions['width']).replace(/{height}/g,pp_dimensions['height']).replace(/{path}/g,frame_url);
	break;






おまけ。
画像をクリックしたときにポップアップを閉じる処理は

$('div.pp_pic_holder').bind('click',function(){ close(); return false; });


上記の処理を「$('a.pp_close').bind('click',function(){ $.prettyPhoto.close(); return false; });」の下に追加です。


画像に外部へのリンクを貼りたい場合は画像のマークアップセッティングを以下のように変えて「$pp_pic_holder.fadeIn(function(){…」で書き換え処理をすればいいかと。
image_markup: '<a href="#"><img id="fullResImage" src="{path}" /></a>'


たとえば、こんな感じで。

$("a[data-popup^='prettyPhoto']").prettyPhoto({
changepicturecallback: function(){

	var linkData = $(".pp_description a").attr("href");
	//リンク置き換え
	if(linkData != ""){
	    $("#pp_full_res a").attr({
		    href : linkData,
		    target : "_blank"
	    });
	}
	//リンクデータが無い場合、リンクを生成しない
	//子要素のimgタグをクローンし、元データを削除する
        //アンカータグだけ消したいけど、子要素のimgタグも消えちゃうのでこんな処理に…orz
	else{
		$("#pp_full_res a img").clone().prependTo("#pp_full_res");
                $("#pp_full_res a").remove();
	}
}
});


よくよく考ええみたら、まともにJavaScriptというものを勉強してこなかったので、いつもソースとにらめっこしながらの試行錯誤（？）の連続です。



簡単にページめくりエフェクトを実装できる「jQuery Booklet」使ってみた。



今月から、雑誌メディア系の会社に転職したので、現在その媒体のポータルサイトを制作しております。
雑誌媒体は印刷費が結構かさんでしまうので、ポータルサイトを立ち上げて広告収入を得たり、雑誌で使用したデータを二次利用したり、あるいは紙媒体で表現できない部分（動画とかインタラクティブ性とか）を補完しなくちゃいけないわけで、結構大切なんです。
現在僕が手がけているのは
・PC向け媒体ポータルサイト×２
・スマホ向け媒体ポータルサイト×２
・PC向け求人検索サイト
・スマホ向け求人検索サイト
といった感じです。

要は、雑誌媒体２つ分のPC&スマホ向けサイトを２つと、PC&スマホ向け求人検索サイトを作る…ということになってます。

全部合わせて大体「250～300万円/月」の売上を見込んでます。
転職時の面接で、今の会社の社長に自分のプランをプレゼンしたところ、是非やって欲しいということになったので、後には引けないという（笑）。

プレゼンどおりの売り上げを達成出来るかどうかは分かりませんが、それなりのポテンシャルのサイトを作らにゃならんということで毎日ひいひい言っております。

それはさておき…。

ポータルサイトをやるってことは、そこで媒体のバックナンバーを見れるようにしておいたほうがいいわけで、なんかページめくりするエフェクトのプラグインないかな…ってことで探したのが、「jQuery Booklet」です。

プレーンな状態から自分で作るって人は上記のサイトからDLすればいいのですが、今回は既に加工されてる奴をDLしてきて使っちまいましょう。

まずはこちらをご覧ください。

例によって「Coderops」から使わせていただきましょう。




こんな感じです。


このまますぐに使えちゃいます。

基本構造はとっても簡単。


<div id="mybook">
    <div class="b-load">
        <div>
            1ページ目のコンテンツ
        </div>
        <div>
            2ページ目のコンテンツ
        </div>
        <div>
            3ページ目のコンテンツ
        </div>
        <div>
            4ページ目のコンテンツ
        </div>
        <div>
            5ページ目のコンテンツ
        </div>
        <div>
            6ページ目のコンテンツ
        </div>
        ・
        ・
        ・
    </div>
</div>



こんな感じでそれぞれのコンテンツがdivの中に入っていて、切り替えてるだけです。

今回は、すべてのページを画像ファイルとして表示させるので「<div class="b-load">～</div>」の中を
<div>
	<img src="/ファイルフォルダ名/画像ファイル名" />
</div>

で回すことにしました。



必要なファイルは以下のようにして読み込みます。
<!--jQuery読み込み-->
<script src="jquery.min.js" type="text/javascript"></script>
<!--jQuery-UI読み込み-->
<script src="jquery-ui.min.js" type="text/javascript"></script>
<!--jQuery-easing読み込み-->
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<!--Booklet Files 読み込み-->
<script src="jquery.booklet.1.2.0.min.js"" type="text/javascript"></script>
<link href="jquery.booklet.1.2.0.css" type="text/css" rel="stylesheet" media="screen" />



Coderopでダウンロードしてきたものは、上記以外のファイル読み込みやら設定がしてあるので、カスタマイズするだけです。


今回僕が行なったカスタマイズは
・各ページへのリンク（ページャー）を付ける。
・媒体が右開きなので、最初に表示するページを逆にする
くらいです。
まあ、ページ全てが画像なので、そんなにカスタマイズするところはなかったりして。


各ページを[001.jpg],[002.jpg],[003.jpg]…という連番で保存しているので、PHPを使ってページとページャーはループ生成してます。

例えば、こんな感じですね。
<?php

//ファイル一覧取得
if ($dir = opendir("ファイルフォルダ名")) {
    while (($file = readdir($dir)) !== false) {
        if ($file != "." && $file != "..") {
            $data[] = $file;
        }
    } 
    closedir($dir);
}

foreach ($data as $val){
print <<< EOF
					<div>
						<img src="/ファイルフォルダ名/{$val}" />
					</div>
EOF;
}

?>


上記のコードを「<div class="b-load">～</div>」の中にぶっ込めば、すべてのページが生成出来ます。
ただ、右開きのページなので連番のふり方をページとは逆にするか、配列をソートし直す必要があります。
配列のソート関数は「arsort()」とか「krsort()」とかを使います。


さて、ここからがカスタマイズ内容。

今回作ったページャーのソースはこんな感じです。

<div class="menu">
	<ul>
		<li><a href="#" class="gopage toppage" data-page="0">表紙</a></li>
		<li><a href="#" class="gopage" data-page="3">2～3ページ</a></li>
		<li><a href="#" class="gopage" data-page="5">4～5ページめ</a></li>
    </ul>
</div>


見開きでページを移動するので、ページャーはひとつ飛ばしで生成しているというところに注意してください。

昇順で並べている場合には、トップページ（表紙）のページ番号を取得します。
ちょっとややこしいんですけど、降順の場合は表紙のページ番号が「１番最後のページ」になります。
左開きではなく、右開きなので。

「全てのページ数=表紙のページ番号」ということになります。

全てのページ数を取得するためには「<div class="b-load">～</div>」の中のdivの数を数獲ればいいので

$(".b-load div").size();


で取得することが出来ます。

ちなみに、jQuery-Bookletのオプションはこんな感じ。

$.fn.booklet.defaults = {
    name:               null,
    width:              600,
    height:             400,
    speed:              1000,
    direction:          'LTR', 
    startingPage:       0, 
    easing:             'easeInOutQuad', 
    easeIn:             'easeInQuad',
    easeOut:            'easeOutQuad',
    closed:             false,
    closedFrontTitle:   null, 
    closedFrontChapter: null, 
    closedBackTitle:    null, 
    closedBackChapter:  null,  
    covers:             false, 
    autoCenter:         false,
    pagePadding:        10,  
    pageNumbers:        true,
    manual:             true, 
    hovers:             true, 
    overlays:           true,
    tabs:               false, 
    tabWidth:           60, 
    tabHeight:          20, 
    arrows:             false, 
    arrowsHide:         false, 
    cursor:             'pointer', 
    hash:               false,
    keyboard:           true, 
    next:               null, 
    prev:               null, 
    auto:               false, 
    delay:              5000,
    pause:              null,
    play:               null,
    menu:               null, 
    pageSelector:       false,
    chapterSelector:    false, 
    shadows:            true, 
    shadowTopFwdWidth:  166, 
    shadowTopBackWidth: 166, 
    shadowBtmWidth:     50, 
    before:             function(){}, 
    after:              function(){}
}


全オプションの解説は本家サイトのドキュメントを見ていただくとして…。
ページを読み込んだ時に最初に表示させるページの設定は「startingPage:」です。

オプションの設定の前に
var startPage = $(".b-load div").size();

とでもやってページ数を取得しておき、
startingPage:startPage,

で表紙の設定が完了です。

あとは、以下のコードを書けば、思い通りに動いてくれると思います。


//=====表紙へのリンクのdata-pageの値（ページ番号）をページ数に変更
$("a.toppage").attr('data-page',startPage);

//ページャー			    
$("a.gopage").click(function(){
    var pageNo = $(this).attr('data-page');
	pageNo-=0;//マイナスゼロをして文字列型を数値型に変換
    $("#mybook").booklet(pageNo);//ページ移動
});




本家サイトのドキュメントによれば、各ページ移動は以下のようにして呼び出すみたいなので。
//move to the next page
$("#mybook").booklet("next");

//move to the previous page
$("#mybook").booklet("prev");

//move directly to a specific page number, 0 indexed
$("#mybook").booklet(5);




サンプルを置いておきますので、ダウンロードして見てみて下さい。
サンプル（300KB）

MediaboxAdvancedのIEエラーはmootoolsのバージョンを1.2.5にして回避



MediaboxAdvanced

ここでとってきたMediaBoxがIEで動かない…という問題が発生。

…と思ったら、MediaBox側の問題ではなくmootools-coreの問題だったらしい。
現在のmootoolsのバージョンは1.4.5なんだけど、よくドキュメントを見てみたら「1.2.xを使ってくれ」的なことが書いてあったので1.2.5にしたら動いた。

何でもかんでも最新バージョンを使えばいいってもんじゃないんだな…と。


お問い合わせフォームに入力された情報をjQuery-UIダイアログ内に表示、確認させる。



<form action="post.php" method="post" id="form" name="form">
名前を入力してください&ltbr>
<input type="text" name="namae" id="namae" value="" onkeypress="return handleEnter(this, event)"><br>
メールアドレスを入力して下さい<br>
<input type="text" name="email" id="email" value="" onkeypress="return handleEnter(this, event)"><br>
メッセージを入れてください<br>
<textarea name="comment" rows="5" cols="30"></textarea><br>
<input type="submit" value="ここを押すと送信されます">
</form>


こんなフォームがあったときに、jQuery-UIのダイアログ内に記入された内容を表示して、送信してもいいかどうかを確認したいです…と。


まずは、フォームの下（でもどこでもいいので）以下のHTMLを追加。
<!--▼ ui-dialog ▼-->
<div id="dialog" title="送信内容の確認">
	<p class="item">お名前</p>
	<span id="namae"></span>
	<p class="item">メールアドレス</p>
	<span id="email"></span>
	<p class="item">お問い合わせ内容</p>
	<span id="comment"></span>
</div>
<!--▲ ui-dialog ▲-->

<style>
/*ダイアログ内のフォントまわり*/
#dialog p,span{ font-size:12px; }
#dialog span{ font-weight:bold; }
</style>




そしたら、後はjQuery-UIの読み込みです。

<link type="text/css" href="ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="ui/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="ui/js/jquery-ui-1.8.17.custom.min.js"></script>



んでもって設定を書く…と。

<script type="text/javascript">
//エンターキー押下時に次のフィールドへ
function handleEnter (field, event) {
		var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
		if (keyCode == 13) {
			var i;
			for (i = 0; i < field.form.elements.length; i++)
				if (field == field.form.elements[i])
					break;
			i = (i + 1) % field.form.elements.length;
			field.form.elements[i].focus();
			return false;
		} 
		else
		return true;
}

$(function(){

        // jQuery UI ダイアログの設定
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: true,
            buttons: {
                "送信する": function() {
                    //送信を実行
                    document.form.submit();
                },
                "キャンセル": function() {
                    //ダイアログを閉じる
                    $(this).dialog("close");
                }
            }
        });

        //送信ボタンが押されたときに呼び出される
        $('form').submit(function(e){
            e.preventDefault();
            var noneStr = '未入力';

            //各項目を取得してダイアログ内に追加
            //ホントは$("input")→$(this)で同じことを書かないようにしなきゃだけど
            //今回は見逃してください…orz
            if ( $("input#namae").val() != "" ){
                $("span#namae").html( $("input#namae").val() );
            }
            else{
                $("span#namae").html(noneStr);
            }

            if ( $("input#email").val() != "" ){
                $("span#email").html( $("input#email").val() );
            }
            else{
                $("span#email").html(noneStr);
            }

            if ( $("textarea").val() != "" ){
                $("span#comment").html( $("textarea").val() );
            }
            else{
                $("span#comment").html(noneStr);
            }

            //ダイアログを開く
            $('#dialog').dialog('open');
        });
        
});
</script>


ここまでは授業でさらっとやりましたね（笑）。


文字が入力されていたら、このようにダイアログ内に表示されます。




文字が入力されていなかったらこんなふうに「 noneStr = '未入力'」で設定した文字がかわりに表示される…と。





問題は<form>の「action=""」で呼び出されるPHPの方です。
この当たりの記事にも書いてあるようなメールアドレスのバリデートを行なったり…と、やることは結構ありますが、今回は簡易処理を。


簡易処理…ということで、全部ソースのっけちゃいます。

<?php 

//名前の入力があったら「$_POST['namae']」を、無かったら'未入力'を
$name = (empty($_POST['namae'])) ? '未入力' : $_POST['namae'];

//メアドの入力があったら「$_POST['email']」を、無かったら'未入力'を
$email = (empty($_POST['email'])) ? '未入力' : $_POST['email'];

//コメントの入力があったら「$_POST['comment']」を、無かったら'未入力'を
$comment = (empty($_POST['comment'])) ? '未入力' : $_POST['comment'];

//件名をセット。わかりやすく変えてね
$subject = "件名";

//メールを受け取るアドレス（送信したいアドレス）を入れてね
$to="example@gmail.com";

//メール送信に失敗したら戻るURL
$turn_url = "index.html";

//メール送信に成功したら、メール送信完了ページへ
$success_url = "success.html";


//メッセージ内容成型
$message =  "お名前: $name \n";
$message .= "E-mail: $email \n";
$message .= "お問い合わせ内容: $comment \n";


//送信に成功したら、送信完了ページへ
if( mail( $to,$subject,$message,"From: $email") ) {
    header("Location: $success_url");
}
//送信できなかったら、元のページに戻す…と。
else {
    header("Location: $turn_url");
} 

?>



まずはempty()でPOSTされてきた変数の中にデータが入っているかどうかを判別します。
もし、中身が入っていなかったら、'未入力'という文字列を入れることにします。


件名や成功時に移動するページ、あるいは失敗時に戻るページ（つまりフォームを置いてあるページ）…それからメールアドレスは直接自分で指定してください。


あとは、mail()関数でメールを送信。
成功したら「header("Location: $success_url");」で送信完了ページへリンク。

失敗したらフォーム入力ページへ戻します。


一応、ここにZipで固めて置いておきます。



今日は最終日。

正真正銘最後の授業…ということになるのでしょうか。


最後は、色々とあって（精神的に参ってしまった）という終わり方となってしまって、大変申し訳なく思っています。

会社の方からもあれやこれや「脅しかな？」とも受け取れるようなメールが来たりと大変でしたが、Twitter、FaceBookでメッセージをくれた生徒さんに助けられてしまいました。


気持ちは分かるけど、そういうしようもないところに力を注いでもあんま意味ないんじゃないすか？
それで楽しいんなら別だけど。。。(^^;

それよりもキャバ、美容室、ラーメンの方にリキ入れて楽しい
思いをしましょうヨ。

Uさんの事、考えて「ううむ」よりキャバクラに行って
「うひひ」の方がいいですヨ。。。((爆))



いやぁ…全くその通りですよね。
キャバクラがどうかはさておき。

いちいち相手しててもしょうがないので、力入れてスマホ用Webアプリ…それから電子書籍を作ってます。
やっぱりコードを書いてる時が一番楽しいですね。

とりあえず、４月までには「沖縄ラーメン100 with ラーコミュ」を電子書籍化！…を目標に頑張ってみます。

おっと…「100シリーズ」パクってまたひと悶着ありそうな悪寒？（笑）


あ、そだ。
Twitterで僕を探してフォローしてやってください。

金髪時代の僕が拝めるらしいです。
できたら、このブログにもコメント下さい。
ちゃんと見てますので。

こんなこと出来ませんか？系のコメントもよろしくお願いします。
ブログのネタになるのであれば、頑張らせていただきます。



そんなこんなで2月ももう終わり。
3月1日から、新しい職場でのお仕事が待っています。

今度の職場はメディア系です。
具体的には観光ガイドブックの編集部なんですが、僕が担当するのはDTPではなくネットの方。
最近は紙媒体もそれだけでは食っていけなくて、クロスメディア戦略でもって収益の向上を図らなければならない…ということで。

既にPC＆スマホのポータルサイト制作が２件決まっているので、のんびり…という訳にはいかなさそう。

求人メディアも絡んでるみたいなので、お仕事検索アプリなんかも作ってみたいし、そもそもDTPの会社なので、過去のリソースを電子化して出版…というところも提案してみたら、あっさりオーケー。

なにこのレスポンスの良さ！

もちろん、ECサイトの案件も結構あります。

お店単独ではなく、地域ぐるみでモールのようなことをやりたい…という案件もあったりして、なんだか楽しそうな感じです。

こういうのって…




今後100年は放射性物質で繰り返し被曝する状態に。

福島県が毎日公表している、定時降下物環境放射能測定結果をご存知でしょうか。
昨年の12月から急激に上昇し、いまだに高い数値を計測しています。

例えば、
2月11日 セシウム134：98.2 セシウム137：139
2月15日 セシウム134：150 セシウム137：199
2月18日 セシウム134：105 セシウム137：147
（全てMBq/Km2）

昨年の10、11月はこの数値はどちらも10以下でした。
これが突然12月から増えだしたわけです。

原発問題で有名な武田邦彦教授は、

「3月、4月の一撃だけ」から
「あちこちから来る放射性物質で、１００年間繰り返し被曝する」という状態へと変わった
ことを示しています。
つまり、放射性物質は１００年は無くならないし、人の体を何回も通り過ぎてもその量は変わりません。

良く原理を知らない人が
「セシウムの降下物が増えていると言っても、空間線量が変わらないから大丈夫」
のように言っていますが、空間線量の主力は地面からで、セシウムが空気中にあればそれを呼吸で吸い込んで３ヶ月分、被曝するからまったく別なのです。

また、福島県が１月２日の４３２ベクレルについて、
「被曝量は規制値の５００分の１」という発表があり、私の計算とかなり違っていたので、「１００ベクレルはとれた野菜が危険なレベル」という表現にしておきましたが、よくよく検討すると、福島県の説明はおそらく間違いと思います。

つまり、福島県の「５００分の１」というのは、
空中に飛散する放射性物質を呼吸で体内に取り込むことはなく（福島県の人は呼吸しないという仮定）、地面に落ちた放射性物質からの空間線量のことを言っていることがわかったのです。「福島の人は呼吸しない」という県の仮定もかなり大胆で、セシウムが降下するというのは、降下する前に空中に漂っていたからですから、もっとも注意を必要とするのは呼吸、つまり「マスクをかける」ということだからです。

人間が一日に呼吸する量は約２０立方メートルですから、どのような粒がどのよに飛散しているかによって違いますが、おおよそ、１００ベクレル（平方メートルあたり）なら、一日に１００ベクレルの被曝を受けることになり、これを毎日続けていると、１００で割るとミリシーベルト（年間）になりますから、１００ベクレルのところに住んでいれば、マスクをしなければ１年１ミリの被曝になります。

と仰っています。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

福島県の降下物の増加の件や、毎時1000万ベクレルの件は
ニュースや新聞ではほとんど報じられません。
中国や北朝鮮の情報規制が恐ろしいと言っていた私達日本人ですが、
実は日本も中国や北朝鮮と何ら変わらないのです。

幸いにも、ネット上には情報が溢れています。
少し検索すれば、上記のような情報はたくさん出てくるのですが、
「政府や東電の発表を鵜呑みにして安心している」方も大勢いるのが実情です。

実際に、私の両親もこう言っています。
「政府が収束宣言を出してるし、スーパーの野菜やお肉も全部放射能調査済って書いてあるから安心。気にしすぎなのよ」

私から言わせれば、政府の収束宣言は全くのデタラメ。
スーパーの野菜や肉の放射能の検査にしても、日本のバカみたいに高い暫定基準に併せて出荷されたもので、到底信用出来るものではありません。

結局のところ、関東や東北に住む人たちは、
出来るだけ被曝しないように注意するしかありません。

環境省の試算では、毎時0.23μSv/hで外部被曝のみで、年1mSvを超えてしまうのですから
これに内部被曝まで加わればとんでもないことになります。

そういった意味でも、放射線測定器というのは今後も必要なもの
いえ、一家に一台あるべきものになったと言えるでしょう。

こんな内容のメルマガがきて、何かと思ったら、放射線測定器の販売…と。

放射線の件はさておき、不安を煽ってモノを売る手法ってなくならないよね。

jQueryのgetJSONでツイッターのツイートを取得してくる。


Javascriptのコードはこんな感じで…
$('.tweets').each(function () {
    var user = $(this).attr('data-source');
    var el = $(this); 
    $.getJSON(
    'http://twitter.com/statuses/user_timeline.json?screen_name=' + user + '&count=1&callback=?', function(data) {
        el.children('blockquote').text(data[0].text);
	el.children('.author').html('<a href="http://twitter.com/' + data[0].user.screen_name + '">@' + data[0].user.screen_name + '</a>');
	el.children('.time').text(data[0].created_at).prettyDate();
	$('.portfolio, .masonry').not('.no-masonry').masonry();
    });
});


HTMLソースはこんな感じ。
<div class="tweets" data-source="SteveJobs_BOT">
    <blockquote>Loading tweets...</blockquote>
    <span class="author"><a href="#"></a></span>
    <span class="time"><a href="#"></a></span>
</div>


<< 前のページへ最新 | 6 | 7 | 8 | 9 | 10 | 最初次のページへ >>

ブログ画像一覧を見る

このブログをフォローする