2014年06月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

jQueryプラグインの作り方 超入門1(自作ライブラリ)

jQueryを使っていろいろやれるようになってきたら、そろそろプラグインも作れるようになりたくなるってもんだよね!

超シンプルな例を使って、プラグインの作り方を説明しようと思う。



まずは事例を見てほしい

僕が作った超絶プラグイン。その名も「アラートファンキー」というプラグインだ。
アラートファンキーの事例
「ボタン1」をクリックしてみてね。

このプラグイン
$('#btn1').alertfunky(); 
という風にidに対して指定すると、そのidをクリックしたときに「ファンキー!」というアラートが出る、という機能だ。 

 
このアラートファンキープラグインの作り方を説明しながら、プラグインの作り方をざっくり理解してもらえればいいと思う。



プラグインのjsファイルの中身 

このプラグインのファイル名は「jquery.alertfunky.js」。
jqueryのプラグインはこういう名前の付け方をするのが一般的。


中身はこんな感じ

jquery.alertfunky.js
$(function(){
$.fn.alertfunky = function(){
$(this).click(function(){
alert("ファンキー!");
});
};
});
 
たった8行でなりたってる。
(jqueryの記述本文だけを考えれば6行)

覚えなきゃいけないのは2つだけ。



名前を決める

まずは2行目の
$.fn.alertfunky = function(){...
の部分。

$.fn.alertfunkyとなっている。

この形式でメソッドの名前をつくる。

例えばbigbtnとかいうメソッド名にしたければ
 $.fn.bigbtn = function(){...

という風にすればOK。 



機能の部分を書く

次に3〜5行目に肝心のプラグインの機能を書いている。

$(this).click(function(){
alert("ファンキー!");
}); 
中身自体は簡単。
クリックしたらファンキー!とalertする。それだけ。

大事なのは$(this)の部分。

$(this)をクリックしたらalertが出るのはわかる。

じゃぁ$(this)は何をさすのかというと、それは後で決めることになる。

どこでalertが発動するのかを後で決められるというのがプラグインっぽいところだよね。


これでプラグイン部分はおしまい。

次にプラグインを読み込んで実際に使う場面を考えてみる。



プラグインを使う 


プラグインを読み込んだhtmlはこんな感じになっている。

html
<script src="jquery.js"></script>
<script src="jquery.alertfunky.js"></script>
<script>
$(function() {
    $('#btn1').alertfunky();
});
</script>
<div id="btn1" class="btn">ボタン1</div>

 jqueryのプラグインを使ったことがある人ならこのへんは大体わかると思う。

まず1,2行目でjqueryと今回作ったプラグインであるjquery.alertfunky.jsを読み込む。

次にid="btn1"に対して、alertfunkyが発動するようにする。
$("#btn1").alertfunky();

↑プラグイン使う時こういう形よくでてくるよね!

さっきの$(this)の話に戻るけど、

ここで指定した$("#btn1")がプラグイン側の$(this)にあたる、というわけ。

id="btn1" に対して、alertfunkyメソッドを発動したので、ボタン1をクリックすると
「ファンキー!!ウリィィィィィィィイイ!」っていうalertが出るっていうわけ。



あとは膨らませるだけ 

alertするだけというシンプルなプラグインを作ってみたけれど、構造は大体こんな感じなので、あとは中身を膨らませて、$(this)に対していろいろやらせれば、もっと複雑なプラグインができていくよ!


アルジャーノン! 

MTを組み込んだ時にチェックしたい11のリスト

MovableTypeの仕事を久々にやっていて、3年以上前につくったチェックリストが出て来たので共有。

1. トップページテンプレート側でのMultiBlogの再構築トリガーは設定してあるか。
2. 記事を削除してもトップに反映される、MTblogExtプラグインはいれてあるか。
3. ブログのエントリー画面で、不要なカラムは非表示にしてあるか。
4. 管理者とは別に記事投稿するためだけのユーザーアカウントは作ってあるか。
5. ユーザーアカウントではテンプレートなど余計なものが触れないように
 権限設定されているか。
6.  記事一覧ページではページ送り(pager)が適切に設定されているか。
7. エントリー画面でdivやpを入力されても、文字が変に崩れたりしないか?
  (line-heightなど)
8. エントリー詳細ページに行くと、サイドバーにあるカテゴリ一覧の数字が変化したりしないか。
9.  エディタプラグインは要望に応じて入れているか?
10. hタグがエントリーで使われた際に、適切な見出しになるようにcssが作ってあるか。
11. 共通で出てくる部分はモジュール化してあるか。 

こういうのってチェックリスト化しておかないと、属人化しちゃうんだよね。


 

マウスを使わずにキーボード入力のみでチェックボックスにチェックを入れる

tabキーでフォームを移動していって、チェックボックスにフォーカスがあたっている状態で「スペースキー」を押せば、チェックが入る。

もう一回おせばチェックがとれる。

 

softbankのwifiスポットに接続したiphoneのテザリングでpcをネット接続する方法

iphoneのテザリングでネット接続して仕事をしていると、1ヶ月7GBの通信量制限なんてすぐに突破しちゃうよね。

じゃぁカフェなどではwifiをつかって接続すればいいんだ!
って話になるんだけど、スタバやマクドナルドなど一部wifiつかえる場所もあるけれど、僕の活動している範囲(千葉と東京)では、ほとんどのカフェや駅で、まともなwifiがない。

ネットワークで出てくるのは、
0000docomo
0001docomo
au_Wi-Fi
au_Wi-Fi2
0001softbank
0002softbank
wi2_premium
wi2_premiumclub
とかばっかりなの。

これ全部スマホ用のやつらよね、たぶん。

僕のiphoneはソフトバンクのiphoneだから、0001softbankとかに接続させてもらえないのかしら、と思って調べてみたよ。

ソフトバンク-外出先でWi-Fiを使う

wifiスポットにつなげられるのは、iphoneやipadだけと書いてある。

pcから使うには別サービスの申し込みで467円/日かかるとか。

うーむ。1日467円は高い。たかすぎる。
大体30分とかしか使わないことも多いのに467円。。


そうだ!

0001softbankにwifi接続した状態のiphoneでテザリングできないの!?
って思って調べてみた。

それはできないよっていう情報が多い中、
「USBテザリングならできますよ」
という情報が。


んで、さっそくやってみたらできた。

USBテザリングならできるっっっ!!

---追記-----------
コメントでできてないよ!っていう情報をいただきました。
wifiマークが出ているけれど4Gのデータ通信が使われちゃってるようです
検証があまくすみません。
以下は使えない情報かもしれませんが一応残しています↓
---追記ここまで-----------



以下やり方だよ。(softbankだけね試したのは。auやdocomoの人はそれぞれチャレンジしてみて)


■まずはiphoneでwifiスポットに接続出来るようにする

iphoneでsoftbankのwifiスポットに接続出来るようにしていない人は意外に多いのではないか?
僕がそうだったし。

iphoneの設定>Wi-Fi
で出て来た0001softbankとかに接続してみる。

すると、「wifiサービスを申し込んでください」みたいな画面がでてくるので、リンクをタップして進んでいく
(このとき、いったん3G回線に戻さないと 進めなくなるかも)

パスワードやなんにゃらを入れて、申し込むと、iphoneに「メッセージ」が届く。

同意して設定のリンクをタップすると、なんかインストールやらなんちゃらが始まって、なんだかんだで設定が完了する。

そうしたらもうiphoneからはsoftbankのwifiスポットに接続できてるはず。



■ 次にUSBテザリングをする

USBコード(iphoneとpcをつなぐコードね)で、テザリングができるって知ってた?

僕はこないだまで知らなかった。

iphoneでインターネット共有をonにして、pc側のwifiで僕が名付けたwifi名で接続するっていう面倒な手順が必要なんだと思っていた。

でも、そんなことをしないでも、

iphoneのコードをPCにつなぐと自動的にテザリングがスタートする、というやり方があるんだ。
簡単だよ。
詳しいやり方は検索すると出てくる

 

■あとはsoftbankのwifiスポットにつながってるiphoneをPCにつなげばOK!


↓ インターネット共有されつつもwifiにつながってる

iphone_teza
 

これでiphoneだけで町中で快適にネットができる!

(でもこれ、いいのかな・・?) 

最初の1文字だけ適用させるcss first-letter疑似要素

普通のテキストで、最初の1文字だけ色を変えたりでかくしたり、することってあんまりないと思う。
(むかしは雑誌風に1文字目をでかくするとかあったよね)

でも、listなどで頭につく●が色付きだったりすることはちょいちょいある。


調査
お見積もり作成
ご訪問

みたいな感じで。

こういうとき、

<li><span>●</span>調査</li>

というようなやりかたをやっていたのだけれども、cssで1文字目だけやっちゃうほうが楽なんだな。


html

<ul class="flow_list">
<li>●調査</li>
<li>●お見積り作成</li>
<li>●ご訪問</li>
</ul>

css
.flow_list li:first-letter{
color:#0000ff;
}

ってやるだけでシンプルに実現できる。

しかもIE6から使えるから、安心。
対応ブラウザ

急な腹痛にも安心なの。

 
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ