12/29/2012

CSS3 によるローディングアニメーションを生成する jQuery プラグイン jquery.cssloading.js をリリースしました

CSS3 によるローディングアニメーションを生成する jQuery プラグインを作ってみました。iOS や Android といった、スマートフォン用のプラグインという位置づけです。cssloading() でアニメーション開始、stopcssloading() でアニメーション停止を行います。アニメーションの形やスピードなどは、プロパティを与えて設定します。
GitHub: jquery.cssloading.js

☆確認環境
iOS/Android

☆プロパティ一覧
  • type:アニメーションの形(dot/line/square/block/eddy)
  • width:表示されるアニメーションのサイズ(数値)
  • color:色(CSSで定義できる値)
  • size:表示されるひとつひとつのサイズ(数値)
  • items:表示されるアイテムの数(数値、「type」が「dot」の場合は円を構成する数、それ以外は1行の数)
  • speed:アニメーションのスピード(ミリ秒)
  • clockwise:右回りか左回りか(「true」が右回り、「false」が左回り)
  • direction:アニメーションを行う起点の方向(「left」「right」「top」「bottom」)
  • shape:表示されるひとつひとつの形(「circle」「square」)

☆使用できるプロパティの種類
  • dot:direction/shape以外
  • line:width/clockwise以外、「direction」は「left」または「right」
  • square:width/direction以外
  • block:width/clockwise以外
  • eddy:width/direction以外

☆ファイルの読み込み
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='jquery.cssloading.min.js'></script>


☆html
<button>Play/Stop</button>
<div id='loading'></div>


☆JavaScript(dot)
// 開始
var option = {
  type: 'dot',
  width: 100,
  color: 'rgba(0, 102, 255, .9)',
  size: 3,
  items: 30,
  speed: 1000,
  clockwise: false
};
$('#loading').cssloading(option);

// 終了
$('#loading').stopcssloading();


☆結果
flugel.bizでご確認ください。


☆JavaScript(line)
// 開始
var option = {
  type: 'line',
  color: 'rgba(255, 255, 255, .9)',
  size: 5,
  items: 10,
  speed: 1000,
  direction: 'left',
  shape: 'square'
};
$('#loading').cssloading(option);

// 終了
$('#loading').stopcssloading();


☆結果
flugel.bizでご確認ください。

その他のサンプルは jquery.cssloading.js | Archives | Flügel にて公開しています。

12/13/2012

徴兵制うんたらについて

Facebook で流れてきた徴兵制に関する世界地図を見ました。
ぼくとしては、徴兵制自体に賛成ではありません。

【ここから個人的見解】
しかし、その地図を最初に投稿した人の wall をざっと読みましたが、その人は所謂「反戦・反原発」という、「玄関に強盗お断りと貼っておけば強盗は来ないんだよ」っていうお花畑思想と理解できました。
その地図へコメントしている人々やシェアしている人々には「子どもや自分が徴兵されたくない」というあまりにも感情的な文言が並んでいました。
確かに徴兵されるということは、戦地に赴くことにつながるでしょう。しかしここで皆が反対を唱えていると、侵略された際に、我々は座して滅びることを待つしかありません。戦地へ赴いても日本を守ることができないかもしれません。しかし、守ることもできるかもしれません。その可能性を自ら壊すように拒絶反応をしていいのでしょうか。なお、徴兵制の復活を公言する人たちのように書かれていますが、彼らのうち一人でも、「戦争したい」と言っているでしょうか。「徴兵する=戦争をしかける」と曲解するのは勝手ですが、それは彼らの真意ではないと思います。

かつて、菅原道真は「China Free!」と声高に叫び、遣唐使を廃止させました。その結果、国風文化が生まれ、それまで漢文体だった文字から日本独自のひらがなやカタカナなどの文化が生まれ育ちました。執権北条時宗は、日本を守るために、断固とした外交を行いました。
現在、日本は侵食されています。今こそ、外交と自衛をしっかりと考え、実行しないといけないと思っています。アメリカさんに守ってもらう?そう思うのもいいでしょう。しかし果たして、アメリカは有事の際に「本当に」日本の代わりに闘ってくれるのでしょうか。それは疑いないものなんでしょうか。「日本を守るために俺たちはいるんだ!」というぐらいに、日本という国に愛着があるでしょうか。我々日本人は彼らよりその意識が少ないのでしょうか。ぼくは違うと思います。日本という国を愛し、守れるのは、最後はぼくら日本人だと思います。

徴兵制に賛成ではないぼくが思うのは、防衛費の増額と防衛省が自衛官に興味を持ってもらうようもっと努力することが先だということです(マスコミ含む)。自衛隊へ入隊している人々は、国を守るという意識が少なくとも我々よりも強いと思うのです。その自衛官への予算を増やすことは、国防にとってプラスになると考えています。

ぼくが言いたいのは、徴兵制ヒャッハ-ということではありません。重複になりますが、ぼくは、徴兵制自体に賛成ではありません。しかし、徴兵制という言葉だけが踊り、その言葉への拒絶反応を示すことはどうなんだろうと思っています。

12/07/2012

jquery.twitter.widget.js をリリースしました

Twitter のウィジェットを仕事で使うことになったんですが、Twitter API が 1.1 になったので、既存のウィジェットを使うと 来年 3 月 5 日以降サポートがされなくなる らしいのです。そこで、本家のウィジェット も新しくできたらしいので見てみたら、カスタマイズしづらいって思ったので、その案件専用のウィジェットを作りました。でもこれを汎用的にしておくと、他の案件でも使えるかもしれないし、これを使って幸せになる人もいるかもしれないので、jQuery プラグインとして作りました。

wings1685/jquery.twitter.widget.js


【使い方】
ダウンロード後(必要であれば解凍後)に生成された「jquery.twitter.widget.min.js」をhtmlに指定します。
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
<script type='text/javascript' src='jquery.twitter.widget.min.js'></script>
また、生成された「twitter.php」をどこかのディレクトリにアップロードします。ここではサンプルとして、「/api/」にアップします。


【機能詳細】
「$(selector).twitterWidget()」でターゲットとするTwitterユーザのツイートを取得し、表示します。表示する内容やツイートを表示する速さなどはプロパティを設定することで変えられます。

プロパティ一覧
  • screen_name:対象とするTwitterアカウント名
  • count:最大表示件数(最大200件)
  • speed:ツイートを表示していくスピード(秒)
  • exclude_replies:リプライのツイートを表示するかどうか(「true」で排除、「false」で表示)
  • include_rts:リツイートを表示するかどうか(trueで表示、falseで排除)
  • dateformat:日付のフォーマット(「Y年M月D日 h時m分s秒」など)
  • path:「twitter.php」までのパス(「./api/」など)
  • src:表示する部分のソース
  • src.header:ヘッダ部分
  • src.body:本体部分
  • src.footer:フッタ部分
  • src.reply:リプライ部分
  • src.retweet:リツイート部分
  • src.favorite:お気に入り部分

src内で指定できる予約文字列
  • $icon$:アイコン(a要素で囲まれたimg要素として書き出します)
  • $screen_name$:アカウント名(a要素で囲まれて書き出します)
  • $name$:表示名(a要素で囲まれて書き出します)
  • $description$:プロファイル文章(Twitterの設定で「URL」を指定している場合はこれも書き出します)
  • $text$:ツイート文章
  • $created_at$:日付(a要素で囲まれて書き出します)
  • $logo$:ロゴ(ツイッターロゴをa要素で囲まれたimg要素として書き出します)
  • $reply$:リプライアクション(「src.reply」で指定していればこの内容で書き出します)
  • $retweet$:リツイートアクション(「src.retweet」で指定していればこの内容で書き出します)
  • $favorite$:お気に入りアクション(「src.favorite」で指定していればこの内容で書き出します)
  • $action$:上記の「$reply$」「$retweet$」「$favorite$」をまとめて書き出します
※「src.header」「src.body」「src.footer」で指定できる予約文字列です。
必ず「$」で囲んでください。



【使用例】
ヘッダは「tw_header」、本体は「tw_body」、フッタは「tw_footer」というクラスを持ったdiv要素の中に書き出されます。
任意で指定したソースで書き出されるので、CSSでお好みのスタイルを付けてください。

html:
<div id='twitter'></div>

JavaScript:
サンプル1
ヘッダとフッタなし、リプライ等のアクションはテキスト表記、スピードが5秒ごとのサンプルです。
var option = {
  screen_name: 'wings1685',
  speed: 5,
  dateformat: 'Y/M/D h:m:s',
  path: './api/',
  src: {
    body: "<div class='tw'><span class='tw_text'>$text$</span> <span class='tw_date'>$created_at$</span><div>$reply$$retweet$$favorite$</div></div>",
    reply: 'Re:',
    retweet: 'RT',
    favorite: '★'
  }
};
$('#twitter').twitterWidget(option);


サンプル2
ヘッダとフッタあり、リプライ等のアクションは画像指定、スピードが10秒ごと、リプライのツイートなし、リツイートなしのサンプルです。
var option = {
  screen_name: 'wings1685',
  speed: 10,
  exclude_replies: true,
  include_rts: false,
  dateformat: 'Y年M月D日 h時m分s秒',
  path: './api/',
  src: {
    header: "<div class='clearfix'><strong>$icon$</strong><span>$screen_name$</span><span>($name$)</span></div><p>$description$</p>",
    body: "<div class='tw'><span class='tw_text'>$text$</span> <span class='tw_date'>$created_at$</span><div>$action$</div></div>",
    footer: "<div class='tw'>$logo$<span>Twitter</span></div>",
    reply: "<img src='./reply.png' alt='' title='' />",
    retweet: "<img src='./retweet.png' alt='' title='' />",
    favorite: "<img src='./favorite.png' alt='' title='' />"
  }
};
$('#twitter').twitterWidget(option);


【サンプルソース】
ひとつのhtmlにまとめた例をサンプルソースをとして以下に挙げます。
<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jquery.twitter.widget.js</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="./js/jquery.twitter.widget.min.js"></script>
  <script>
    $(function() {
      var option = {
        screen_name: 'wings1685',
        speed: 10,
        exclude_replies: true,
        include_rts: false,
        dateformat: 'Y年M月D日 h時m分s秒',
        path: './api/',
        src: {
          header: "<div class='clearfix'><strong>$icon$</strong><span>$screen_name$</span><span>($name$)</span></div><p>$description$</p>",
          body: "<div class='tw'><span class='tw_text'>$text$</span> <span class='tw_date'>$created_at$</span><div>$action$</div></div>",
          footer: "<div class='clearfix'>$logo$<span>Twitter</span></div>",
          reply: "<img src='./reply.png' alt='' title='' />",
          retweet: "<img src='./retweet.png' alt='' title='' />",
          favorite: "<img src='./favorite.png' alt='' title='' />"
        }
      };
      $('#twitter').twitterWidget(option);
    });
  </script>
</head>
<body">
  <div id="twitter"></div>
</body>
</html>


【確認環境】
jquery.twitter.widget.js は下記のブラウザでお使いいただけます。
  • Chrome
  • Safari
  • Firefox
  • Opera
  • Internet Explorer 7 以降

【実行結果】
flugel.biz でご確認ください。

12/03/2012

FaceTime で自分側の映像を隠す方法

みなさん FaceTime は使ってますか!?ぼくは使ってませんでした。

でも最近、普段は Skype で連絡を取ってた人と「どうせだから FaceTime でやろうぜ」って話になり、実際やってみてるんですが、別に顔見て話すわけじゃないし、お互い「恥ずかしいぜ///」って言ってたので、もしかしたら同じように思ってる人もいるんじゃないかって思ってエントリーを書きます。

偶然見つけた、っていうか「あれ?映像消えてますよ?」って言われて初めて消せることに気づきました。相手にも同じことやってもらったら、確かに映像は配信されないことを確認しました。

【FaceTime で自分側の映像を消す方法】
FaceTime のアプリを Dock にしまう

たったこれだけです。