φ(..)メモとして残しておこう… -10ページ目

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

iFrameのheightを取得して、自動サイズ調整

自分用メモ。



========Script========

<script>
function doIframe(){
	o = document.getElementsByTagName('iframe');
        
        //複数ある場合でも対応
	for(i=0;i<o.length;i++){
		if (/\bautoHeight\b/.test(o[i].className)){
			setHeight(o[i]);
			addEvent(o[i],'load', doIframe);
		}
	}
}

function setHeight(e){
	if(e.contentDocument){
		e.height = e.contentDocument.body.offsetHeight + 35;
	} else {
		e.height = e.contentWindow.document.body.scrollHeight;
	}
}

function addEvent(obj, evType, fn){
	if(obj.addEventListener)
	{
	obj.addEventListener(evType, fn,false);
	return true;
	} else if (obj.attachEvent){
	var r = obj.attachEvent("on"+evType, fn);
	return r;
	} else {
	return false;
	}
}

if (document.getElementById && document.createTextNode){
 addEvent(window,'load', doIframe);	
}
</script>


======HTML======

    <iframe  
    src="example.html"  
    width="100%"
    height="100%"
    scrolling="no"  
    align="top"  
    frameborder="0"
    class="autoHeight"></iframe>

動作確認

・Chrome
・FF9
・IE7,8,9

そういや、Safari入れてないや…。

覚えておくと捗るjQueryのコードスニペットあれこれ。その２

jQueryを使って誕生日を検証

18禁サイトとかに実装したいですね。
年齢認証とか、ただ設けているだけで実際には機能してないですから…。

$("#age-form").submit(function(){
	var day = $("#day").val();
	var month = $("#month").val();
	var year = $("#year").val();
	var age = 18;
	var mydate = new Date();
	mydate.setFullYear(year, month-1, day);

	var currdate = new Date();
	currdate.setFullYear(currdate.getFullYear() - age);
	if ((currdate - mydate) < 0){
		alert("ごめんなさい。" + age + "歳未満はｵｺﾄﾜﾘ━━━( ﾟωﾟ )━━━!!!!");
		return false;
	}
	return true;
});

画像がロードされていることを確認する

よく、$( function(){…でスクリプト動かしてるサイトとかありますけど、スライダーバナーとか画像がロードされてないと実行してもしょうがないスクリプトなんかは、これを使いたいです。

$('#Image').attr('src', 'image.jpg').load(function() {
    ここにコードを…(ry
});

jQueryを使用してテキスト内の検索

これは捗るスニペットです。

$.fn.egrep = function(pat) {
 var out = [];
 var textNodes = function(n) {
  if (n.nodeType == Node.TEXT_NODE) {
   var t = typeof pat == 'string' ?
    n.nodeValue.indexOf(pat) != -1 :
    pat.test(n.nodeValue);
   if (t) {
    out.push(n.parentNode);
   }
  }
  else {
   $.each(n.childNodes, function(a, b) {
    textNodes(b);
   });
  }
 };
 this.each(function() {
  textNodes(this);
 });
 return out;
};

ブラウザの検出

ここにあるのはあくまでも一例。
jQueryを使うと、ブラウザ検出も「$.browser.○○○」で出来ちゃうんですね。

//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

相対マウス位置を取得する

表示領域の左上からの「絶対位置」ではなく、指定要素の左上からの相対位置を取得します。

function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;

  return {'x': x, 'y': y};
}

マウスカーソルのX軸とY軸を取得

これは表示エリアに対するX軸・Y軸の位置を取得。

$(document).mousemove(function(e){  
$(document).ready(function() {  
$().mousemove(function(e){  
$(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);  
});  
});

右クリック禁止

よくありますよね…結構ウザイ。
「要素を検証」が右クリックで呼び出せなくてイラっとします。

$(document).bind('contextmenu',function(e){ return false; });

ちなみに、クリックを「検出」するには、以下のコードを。

$("#id").live('click', function(e) {  
    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {  
        alert("左クリックしましたね？");  
    }  
    else if(e.button == 2)  
        alert("右クリックとか、まぢありえないんですけど？");  
});

テキストエリアの文字数を制限する

テキストエリア…。
文字数制限しておかないと、だらだらとたくさん書いたりする人いますよね。
そんな時には文字数制限をしてしまいましょう。
「maxLength(数値)」で適用するのですが、数値の単位は文字数ではなくバイト数です。

jQuery.fn.maxLength = function(max){  
    this.each(function(){  
        var type = this.tagName.toLowerCase();  
        var inputType = this.type? this.type.toLowerCase() : null;  
        if(type == "input" && inputType == "text" || inputType == "password"){  
            
            this.maxLength = max;  
        }  
        else if(type == "textarea"){  
            this.onkeypress = function(e){  
                var ob = e || event;  
                var keyCode = ob.keyCode;  
                var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;  
                return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);  
            };  
            this.onkeyup = function(){  
                if(this.value.length > max){  
                    this.value = this.value.substring(0,max);  
                }  
            };  
        }  
    });  
};

▼使い方はこんな感じ▼
$('#id').maxLength(500);

jQueryで要素のクローンを作成する

まあ、あまり使わないかもしれませんが、クローンを作って大量にappend()しまくったりとか。
え…それって(・∀・)ﾌﾞﾗｸﾗ?

var cloned = $('#clone元').clone();

要素を画面中央に表示

よく、LightBox系プラグインに使われてるコードです。

jQuery.fn.center = function () {  
    this.css('position','absolute');  
    this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');  
    this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;
}

    ▼使い方
    $("#要素id").center();

特定の名前のすべての要素の値を配列に取得

いやぁ…これは捗ります。

var arrInputValues = new Array();  
  $("input[name='table\\[\\]']").each(function(){  
    arrInputValues.push($(this).val());  
);

ストリップタグ(strip HTML-Tag)

要はPHPで言うところの「strip_tags()」です。

(function($) {  
    $.fn.stripHtml = function() {  
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;  
        this.each(function() {  
            $(this).html(  
                $(this).html().replace(regexp,"")  
            );  
        });  
        return $(this);  
    }  
})(jQuery);
 
    ▼使い方  
    $('input').stripHtml();

ページ上のすべてのチェックボックスを切り替える

こういう「全て選択」系のスニペットは結構需要あります。

var tog = false; // ロード時に全てチェックされている設定の時はtrueに  
$('#all').click(function() {  
    $("input[type=checkbox]").attr("checked",!tog);  
    tog = !tog;  
});

Cookieが有効かそうでないかを確認する方法

よく「クッキーを有効にしてください」とかメッセージが出ますが、あれはこうやって確認してるんですね。

var dt = new Date();  
dt.setSeconds(dt.getSeconds() + 60);  
document.cookie = "cookietest=1; expires=" + dt.toGMTString();  
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;  
if(!cookiesEnabled){
    alert("私の美味しいクッキーは如何ですか？… 欲しけりゃ有効にしな。このブタ野郎！");
}

iPhone & iPod 向けのWebサイトを作る際に覚えておくと捗るコードスニペットあれこれ

JavaScript:Javascriptを使ってiPhoneとiPodを検出

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
    if (document.cookie.indexOf("iphone_redirect=false") == -1) {
        window.location = "http://example.com/";
    }
}

PHP:PHPを使ってiPhoneとiPodを検出

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://example.com/iphone');
    exit();
}

HTML:ビューポートの設定。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

HTML:iPhone固有のアイコンを挿入する。（ホーム画面登録用）

画面を横にしたときにSafariがテキストサイズを変更するのを防ぐ。

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
}

JavaScript:iPhoneの向きを検出する(この例では、CSSが追加されています)

window.onload = function initialLoad() {
    updateOrientation();
}

function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;

	case -90:
	contentType += "right";
	break;

	case 90:
	contentType += "left";
	break;

	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

CSS:iPhoneとiPodだけにCSSを適用する

@media screen and (max-device-width: 480px){
    ここに設定を書きます。 
}

CSS:画像のリサイズ幅を480px以下にする。

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

JavaScript:デフォルトではツールバーを非表示にする

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

HTML:SMSと電話のリンク

<a href="tel:12345678900">電話をかける</a>
<a href="sms:12345678900">送信させたいメッセージ</a>

JavaScript:hover擬似クラス

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

上記コードを書いた上で

a:hover, a.hover {
    設定
}

覚えておくと捗るjQueryのコードスニペットあれこれ。

画像のプリロード



(function($) {
  var cache = [];
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }(jQuery);

jQuery.preLoadImages("image1.gif", "/path/to/image2.png");

複数カラムのサイズを高いものに合わせる

var max_height = 0;
$("div.col").each(function(){
    if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div.col").height(max_height);

レガシーブラウザでHTML5のマークアップを有効にする

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

できたら、ヘッダーにこれを追加しておくと…(ry
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

URLのGETパラメーターを取得する

$.urlParam = function(name){
	var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
	if (!results) { return 0; }
	return results[1] || 0;
}

フォームでエンターキーを無効にする

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

特定の要素にCSSクラスを追加

$('#myelement').addClass('myclass');

特定の要素からCSSクラスを削除

$('#myelement').removeClass('myclass');

特定の要素に、CSSのクラスが適用されているかどうかチェック

$(id).hasClass(class)

jQueryを使ってCSSを切り替える

$('link[media='screen']').attr('href', 'example.css');

要素にHTMLを追加

$('#id').append('追加したい文字列とか');

要素が存在するかどうかを確認

if ($('img').length) {
    log('画像、あるよ！');
} else {
    log('imgタグとかないし。');
}

要素の親要素を取得する

var id = $("button").closest("div").attr("id");

要素の兄弟要素を取得する

$("div").siblings()

プルダウンメニューからオプションを削除する

$("#selectList option[value='2']").remove();

プルダウンメニューで選んだ内容（valueではなくテキスト）を取得

$('#selectList :selected').text();

テーブルの行の色を交互に変える（ゼブラカラー）

$("tr:odd").addClass("odd");
&
.odd{background-color:#ddd;}

要素の中の子要素を数える

$("#id > div").length

「PHP + OAuth」で特定ユーザーのツイートを公式RTするbotを作成してみた。その2

とりあえず、PHPのコードを…。

今回のコードは、だいたいこんな感じです。


<?php

    //最新ツイートを１件取得
    $url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=wired_jp&count=1";
    $tweet = json_decode(file_get_contents($url,true));

    $retweet = $tweet[0]->text;
    $id = $tweet[0]->id_str;

        // twitteroauth.phpを読み込む。
        require_once("twitteroauth.php");

        // Consumer keyの値
        $consumer_key = "C7gMUYn＊＊＊＊＊LP7z9VQ";
        // Consumer secretの値
        $consumer_secret = "D21F7RWHouq＊＊＊＊＊";
        // Access Tokenの値
        $access_token = "134789305-＊＊＊＊＊＊＊＊＊＊＊vJUbZN";
        // Access Token Secretの値
        $access_token_secret = "rH3DM＊＊＊＊＊＊＊＊＊＊kdlmfA9k";

        // OAuthオブジェクト生成
        $to = new TwitterOAuth($consumer_key,$consumer_secret,$access_token,$access_token_secret);

        // TwitterへRTする。
        $req = $to->OAuthRequest("http://api.twitter.com/1/statuses/retweet/{$id}.xml","POST",array("status"=>$retweet));



?>

取得した最新データが既にRTされている場合には、TwitterのAPIはエラーを返すだけなので、今回のコードはやたら短いです。
こんなもんで公式RTのbotが作れちゃうんですね。
ま、実際に僕が書いたコードなわけですが…。

$urlにユーザーのタイムラインから最新の１件を取得してきて、そのデータを$tweetに入れてるのは、以前にやったやつとほとんど同じなので説明の必要はありませんね。

今回は中身（text）だけでなくツイートの固有ID（id_str）が必要になるので、それを変数に入れておきます。

あとは、前回ダウンロードしてきた「twitteroauth.php」を読み込んでOAuthオブジェクトを生成します。
この時にアプリ登録の際に取得した
・Consumer key
・Consumer secret
・Access token
・Access token secret
が必要になります。

後は、TwitterにRTするだけです。
Twitter-APIの使い方は、公式ドキュメントを参考にしてください。

これで、特定のユーザーのツイートを取得してきて公式リツイートするプログラムの出来上がりです。

よく考えたら

$req = $to->OAuthRequest("http://api.twitter.com/1/statuses/retweet/{$id}.json");

でいいのかな…？

まあ、テストしてみます。
現状では、上記のコードでいけました。

ただ、このままではbotになりませんね。

一定期間毎に自動でプログラムを動かして、RTさせなきゃいけません。

これは、サーバーのcronを使わないとどうにもなりません。

というわけで、このプログラムにcron設定をして、終了です。

さくらサーバーのcron設定

レンタルサーバー各社によってcronの設定方法は違うと思いますが、僕の使ってるさくらサーバーはこんな感じです。

実行コマンドはこんな感じです。

今回のプログラム「retweet_bot.php」は、ルートディレクトリ（www）の下の「retweet」ディレクトリに置いてあります。
つまりフルパスだと
/home/webmage/www/retweet/retweet_bot.php
という感じです。

それを実行コマンドとして書く場合は、こんな感じです。

cd /home/webmage/www/retweet/ ; /usr/local/bin/php retweet_bot.php > /dev/null

さくらサーバーのcron実行は、２分おきが限界のようです。
なので、「分」のところに「*/2」としてあります。

これで、全て糸冬了..._φ(ﾟ∀ﾟ )ｱﾋｬ

Twitterのbotって、割と簡単に作れるんですよね。
公式RT云々…より簡単です。

「PHP + OAuth」で特定ユーザーのツイートを公式RTするbotを作成してみた。その１

昨日、最近あまり顔を出していなかった公設市場近くの『CHATAN-COFFEE CafeStreet』のオーナーから、こんな相談を受けました。

「スタッフのツイートを自動で公式RTしたいんだけど…」

オーナーは普段から公設市場まわりのことをツイートしていたのですが、最近は忙しくてなかなかお店の方に顔を出せない…とのこと。
で、スタッフにつぶやいてもらって、そのつぶやきを「@chatancoffee」（公式アカウント）で公式リツイートしたいということらしいです。

というわけで、サクっと「特定の人のツイートを自動で公式RTするbot by PHP + OAuth」を作ってみることにしました。

『twitteroauth』でOAuth認証をする

とはいえ、OAuthの機能を独自で１から作りこむのもアレなんで、ライブラリを探してそれを使っちゃおうと思います。

で、見つけたのがこちら。
The first PHP library for working with Twitter's OAuth API.

では、早速ダウンロードしてみましょう。

ダウンロードしたファイルを解凍すると、いろいろなファイルが入っているかと思いますが、今回使用するのは
「twitteroauth」フォルダの中の
・OAuth.php
・twitteroauth.php
の二つだけです。

最近のプログラムは、こんな感じでフリーで提供されているライブラリを使ったり、開発ツールに入っている機能を使ったり…と難しいプログラムを一からしなくていいというのが特徴かも。
プログラム言語＝ Magic Spells
ということを考えると、まるで召喚魔法のような感じですね。

召喚魔法はとても便利なので、RPGでもついつい頼ってしまいがちになりますが、ライブラリも同様です。
良いか悪いかではなく、ライブラリしか使えない…というプログラマもいたりして。

個人的には召喚魔法も立派な魔法なので、「プログラマ＝魔法使い」を自称してもいいんじゃないかなと思います。

よく、「○○したことがないやつはプログラマを自称するな」とか言っちゃってる人とかいますが、僕は全然構わないと思います。

twitterアプリケーションの登録

「twitteroauth」のダウンロードが終わったら、今度は今から作るアプリケーションをTwitterに登録します。

今回作るbotは、ユーザーに代わって「特定ユーザーの発言を公式RTする」わけですから、その権限が必要になります。
その権限がないと、botはあなたの代わりに公式RTすることができません。
その権限を持っているかどうか認証するのに「OAuth」を使うわけですね。

というわけで、アプリ登録をしに行きます。
https://dev.twitter.com/apps
　　　▲
ここがTwitterアプリを登録するデベロッパーセンターです。

まずは、自分のアカウントでログインしましょう。

次に、「Create a new application」をクリックしてアプリケーションの登録を行います。

登録項目は
・Name（アプリケーションの名前）
・Description（アプリケーションの説明）
・WebSite（アプリケーションをサービスとして提供するWebサイト。別にどこでも構わないです。）
の３つです。

項目の入力が終了したら、規約に同意「Yes, I Agree」をチェックして「Create your Twitter application」で登録です。

アプリ登録が終わったら、「Setting」タブから登録内容の変更を行います。
今回変更するのは、アプリケーションタイプです。
RTする（書き込む）ということなので「Read only（読み込みのみ）」ではなく「Read and Write（読み込みと書き込み）」に変更です。
ラジオボタンのチェックが終了したら、「Update this Twitter application's settings」を押して、更新します。

ここまで出来たら、「Details」タブで最初の画面に戻ってアクセストークンの発行をします。
「Recreate my acess token」ボタンを押すと、アクセストークンが発行されます。
今回、「twitteroauth」で必要になるのは

・Consumer key
・Consumer secret
・Access token
・Access token secret

の４つです。
「Access level」がきちんと「Read and Write」になっているかどうかも確認しておきましょう。

とりあえず、今回はここまでです。
続きは次回。。。

Everyone,Creator - Start your web -

ふと口ずさんだフレーズを掴まえて　
胸に秘めた言葉乗せ空に解き放つの

君に伝えたいことが
君に届けたいことが　
たくさんの点は線になって
全て繋げてく　どこにだって

えー。。。

Google ChromeのCMです。

グーグルのCM（とかムービーとか）はけっこう好きです。

というより、検索エンジンはGoogle（Yahooなんて何年もアクセスしてないです）、ブラウザはクローム押しなので。

残念ながら携帯電話はAndroidではなくiPhone（iOS）ですが。。。

まあ、僕が好きだから…というわけでもありませんが、授業ではChromeを使って作業をすることをすすめています。

しつこいようですが、理由は僕が好きだからという訳ではなく「webkit」のブラウザだからです。

じゃあ、Safariでもいいじゃん？

まあ、そうなんですけど、やっぱり機能の追加等々を考えると、便利なツールが揃ってるクロームの方が良いわけで…。

一番使うのは、右クリックからの「要素を検証」で出てくるデベロッパーツールです。
右クリックでダウンロードできないような画像ファイルも、Resourcesから探し出してダウンロード。

ページ表示が遅いなと感じたらNetworkで何にどれだけ時間がかかっているのか見れますし、あまり一般的ではありませんが「XHR(XMLHttpRequest)」とかかなり使えるツールです。
Ajax使うなら、当然この機能使いますよね。

Chrome使って見てみると、このアメブロも読み込みに8.83秒もかかっていたりだとかそういうことがわかるわけです。

183 requests ❘ 1.23MB transferred

トータルで1.23MBしか読み込んでないのに、９秒近く時間がかかるというのは、リクエスト数が多いからなわけで、その余計なリクエストの原因が広告関係だったりするわけです。

広告をいろいろ読み込むのは運営側の勝手なのでしょうが、それでユーザーにストレス与えちゃなんにもならないだろ…とか思うのですが、アメブロを運営しているCAがアレなんで、そこを期待してもしょうがないのかな…とか思っちゃうわけです。

やっぱり、アイコン類をCSSスプライトで作ってあるのはGoogleだったりFacebookだったりして、アメブロのアイコンはCSSスプライトになっていない…というのが簡単に見れちゃうので、そういうところで比べちゃうわけです。

やっぱりサイバーエージェントより、GoogleとかFacebookの方が上だな…と。

サイバーエージェントごときがどれだけ頑張っても、GoogleやFacebookを超えることはできない（技術云々は勝てないのは明白なので問題にしませんが、僕が言っているのはサービスに対する姿勢の問題）のだな…という現実が丸見えなのです。

技術で勝てないのなら、少しでもサービスを良くするとか、他の方法で頑張らないといけないんじゃないかな…とか思うわけですが、それすら出来ていないのがサイバーエージェントか、と。

そういうことを考えると、今僕が教えている生徒さんたちにも全然IT業界でやっていけるチャンスは転がってるな…とか楽観的に考えているのは僕だけなんでしょうか？

ま、それはさておき。

早いとこ、Googleがボカロ（Vocaloid）を買収して、クラウドで無料提供してくれないかな…とか思ってます。
個人的には、今年はそれがあってもおかしくはないんじゃないかな…。

ボカロを無料で提供することで、YouTubeに投稿したり＋1で共有したりする人が増えるわけで、世界中のトラフィックをGoogleに集中させるための手段としてはアリだと思います。

今や初音ミクは国際的に有名なDivaです。
「ロンドンオリンピックの開会式で歌ってほしい歌手」のアンケートでも１位になったりしてるので、世界に対する影響力はかなりある。

Googleの、携帯用OSの名前は「Android」
僕らの天使、初音ミクさんが「Vocaloid」

このあたりの語呂の良さも、狙ってると思います。

「Googleがボーカロイドの権利を買収してクラウドで無料提供する。」

と予言しておきましょう。

当たったらなんかください。

あ、冒頭のCMですが…。
世界200ヶ国以上で配信されているそうです。

これが、スペイン語バージョン。

曲はそのまま日本語。

Tell Your World EP【初回限定盤CD＋DVD】

新品価格
￥1,592から
(2012/1/25 02:33時点)

これは、欲しい。
久しぶりにメディアを買うか、それともiTunesStoreで買うか…。

iTunesStoreだと200円なんだよな…。

JavaScriptファイル内のPHPコードを実行するには？

一番簡単なのは、それをHTML内に記述して<script>タグで囲んでしまうことです。
こんなふうに。

<script>
var jsVar = "<?php echo $phpVar ?>";
</script>

ただ、example.jsという外部ファイルの場合にはどうすればいいのか…という問題があります。

これもやっぱり.htaccessに書く必要があります。

拡張子「.html」をPHPとして実行するためには以下のように記述します。

AddType application/x-httpd-php .htm .html
AddHandler x-httpd-php5 .htm .html

同じように、拡張子「.js」をPHPとして実行するためには以下のように記述します。

AddType application/x-httpd-php .js
AddHandler x-httpd-php5 .js

<FilesMatch "\.(js|php)$">
SetHandler application/x-httpd-php
</FilesMatch>

base64エンコードされた画像をimgタグで使ってみる。

▼おなじみのこちらのロゴ…▼

ただ単に、アメブロの画像を貼っているだけ…と見せかけて、

実はこんな感じでbase64デコードされた画像（と言えるのか？）をソースに書いております。

だからなんだと言われてしまうと困るのですが…。

swipeにも対応したイメージスライダー「jQuery.flex-slider」を試してみた。

iPhoneの方は、QRコードからサンプルをご覧ください。

サンプルはこちらから

えー。。。早速、使い方を説明しちゃいます。
というか、ここに全て説明が書いてあります。

http://flex.madebymufffin.com/

親切すぎて泣けてくる…。

今までのjQueryプラグインと同じように読み込んで、設定を書くだけです。

------------読み込み-------------
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script>
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

------------HTMLソース-----------
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

これだけで動いちゃうわけですが、いろいろ設定が出来るので、それについても触れておきます。

animation: "fade",              //"fade" か "slide"でアニメーション設定
slideDirection: "horizontal",   // "horizontal" か "vertical" でスライド方向を指定
slideshow: true,                // "true" か "false" でスライドショー機能を設定
slideshowSpeed: 7000,           // スライドショーの間隔を設定。7000なら７秒（単位：ミリセコンド）
animationDuration: 600,         // アニメーションに要する時間を設定（単位：ミリセコンド）
directionNav: true,             // [previous]や[next]のナビゲーションを表示するかどうか
                                  （true or false）
controlNav: true,               //  
keyboardNav: true,              // キーボード操作を有効にするかどうか（true or false）
mousewheel: false,              // マウスホイール操作を有効にするかどうか（true or false）
prevText: "Previous",           // 「戻る」ボタンのテキスト
nextText: "Next",               // 「次へ」ボタンのテキスト
pausePlay: false,               //
pauseText: 'Pause',             // 「一時停止」ボタンのテキスト
playText: 'Play',               // 「再生」ボタンのテキスト
randomize: false,               // ランダム再生（true or false）
slideToStart: 0,                // 一番最初に再生する画像を設定(0なら一番最初の画像から)
animationLoop: true,            // ループ再生 (true or false)
pauseOnAction: true,            // 制御要素とやり取りするときにスライドショーを一時停止する。
                                   (推奨 true)
pauseOnHover: false,            // マウスホバーでスライドショー一時停止（ん？逆か？）
controlsContainer: "",          // 複数のナビゲーションを使用しているときにCSSセレクタを設定。
                                   指定が無い場合はデフォルト（class="flexslider"）
manualControls: "",             // 上に同じく。これはナビゲーションのCSSセレクタ指定。
start: function(){},            // function(slider):スライダーを読み込んだ時に実行
before: function(){},           // function(slider):スライダーアニメーションが実行される度に実行（？）
after: function(){},            // function(slider):スライダーアニメーションを実行し終わる度に実行（？）
end: function(){}               // function(slider):スライダーが最後の画像に達したときに実行（？）

使い方としてはこんな感じで使います。

<script>
var $ = jQuery.noConflict();
$(window).load(function() {
	$('.panels_slider').flexslider({
	animation: "slide",
	directionNav: true,
	controlNav: true, 
	animationLoop: true,
	slideToStart: 1,
	animationDuration: 300, 
	slideshow: true
	});
});
</script>

要は「 $('.flexslider').flexslider();」のところに


flexslider({設定項目１: 値,設定項目２:値,設定項目３:値…})

みたいな感じで書いていけばいいだけです。

PCサイトでも結構簡単に使えるし、iPhone用サイトでもSwipeに対応しているのでバッチリです。
一つのサイトをメディアクエリで表示している場合なんかにいいかもしれません。

ところで…。

よく「EC-CUBEとかのカスタマイズコードをブログとかに載せちゃっていいんですか？それで食べているでしょうに…」なんて聞かれることがあるのですが、僕はエンジニアとしての究極の目的を「使ってもらうこと」においているので、別に構わないと思ってます。

お金云々はそのあとの問題だと思っているので。

僕はEC-CUBEのカスタマイズコードを無料で掲載しています。
かと思えば、そういったコードを出版物にして販売している人もいるわけで…。

EC-CUBE 実践カスタマイズ

オープンソースECサイト構築ソフトEC‐CUBE Ver2.11対応公式ガイドブック応用編

EC‐CUBE「Ver2.11対応」公式ガイドブック基本編―オープンソースECサイト構築ソフト

このへんとか、そうですけどね。

というか、なにせこのブログは自分用の備忘録…というかメモなわけで。

僕は結構忘れやすいので、コードをまるっと載せておかないとどう弄ったか思い出せなかったりするので、掲載する…と。

まあ、お仕事でやったカスタマイズコードはさすがに載せられないんですけど、それでも後からコードを見直したりして忘れないように書いたりしてます。