前回、定数のプラグインが出来たところで終了というつもりでしたが、ひらめきました！
よくわかんないけどコピペしてきてJS実行でなんとかしてるヤツ、ふつーにプラグインにできるんじゃないですか？
そうすれば、毎回プログラムに関数を貼っ付けなくても良くなるもね～。
というわけで、やってみた！
画面のサイズを取得するヤツ
例えば、デスクトップの幅と高さを取得するには、Javascriptではこんな感じラシイ。
//デスクトップ幅
window.screen.width
//デスクトップ高さ
window.screen.height
こんだけ。
これをJS実行してやれば取得出来ます。
また、その後もう少し賢くなって、別にJS実行しなくても、なでしこでも、
//デスクトップ幅
WINDOW["screen"]["width"]
//デスクトップ高さ
WINDOW["screen"]["height"]
コレで取得出来ちゃうってことが分かりました。
でもでも、なにしろｖ１のように、
デスクトップWを表示。
デスクトップHを表示。
みたいに書きたいワケですよ。だってなでしこだもの。
なので結局、関数にして、プログラムの末尾に毎回貼っ付けているんだけど、コレをプラグインにしてみようと思う。
再び目を回しながら、プラグインの作り方を眺めます。
定義：関数
プラグインの実体は、Object。実際の関数定義は、fnプロパティに行う。実際の関数の引数に加えて、システムを表すsysを用意する。
{
'関数名': { // @関数の説明 // @ヨミガナ
type: 'func', // 関数であれば func にする
josi: [['を', 'から'], ['まで']], // 助詞を配列で宣言する (可変長引数として扱いたい助詞は末尾で宣言する)
isVariableJosi: false, // 末尾の助詞を可変長引数として扱う場合 true にする
uses: [], // この関数から別の関数を呼ぶ場合に記述する // (TODO: #282)
fn: function (aFrom, aTo, sys) { ... }, // 関数の実態
return_none: false // 戻り値を返すかどうか
},
...
}
……あんまよく分かんないけど、ようするにfn:の中に命令を入れれば良いのだろう。
相変わらずマニュアルのテンプレートの通りに当てはめていくと、こんな感じか。
'デスクトップ幅': { // @デスクトップの幅 // @ですくとっぷはば
type: 'func',
josi: [],
fn: function () {
return window.screen.width
}
},
'デスクトップ高': { // @デスクトップの高さ // @ですくとっぷたかさ
type: 'func',
josi: [],
fn: function () {
return window.screen.height
}
},
引数もないし、じゃばすくりぷとは１行だから、別に何の難しいことも無い。
デスクトップ幅よりは、実際の表示域を取得できた方が何かと良さそうに思うので、これも追加。
'クライアント幅': { // @ブラウザ内の表示域の幅（スクロールバーを除く） // @くらいあんとはば
type: 'func',
josi: [],
fn: function () {
return document.documentElement.clientWidth
}
},
'クライアント高': { // @ブラウザ内の表示域の高さ（スクロールバーを除く） // @くらいあんとたかさ
type: 'func',
josi: [],
fn: function () {
return document.documentElement.clientHeight
}
},
そして、前回やったエクスポートの呪文と自動登録の呪文をくっつけたら、あっさりと動きました。やったね！（ちゃんと、呪文中のプラグイン名を合わせるのを忘れず）
スマホかタブレットかＰＣかを取得するヤツ
なでしこで、こんな関数を作って使っていました。
●アクセスデバイス
UAとは変数＝「navigator.userAgent;」をJS実行。
iPhoneとは変数＝UAの0から「iPhone」を文字検索。
iPadとは変数＝UAの0から「iPad」を文字検索。
Androidとは変数＝UAの0から「Android」を文字検索。
Mobileとは変数＝UAの0から「Mobile」を文字検索。
もし、(iPhone＞０)または((Android＞０)かつ(Mobile＞０))ならば、「スマホ」で戻る。
違えば、もし、(iPad＞０)または(Android＞０)ならば、「タブレット」で戻る。
違えば、「ＰＣ・その他」で戻る。
ここまで。
一生懸命調べてなでしこで書いたのに、結局元のJavascriptに戻すとか(´・ω・｀)
これならコピペでよかった；
'アクセスデバイス': { // @接続してきた端末を判別 // @あくせすでばいす
type: 'func',
josi: [],
fn: function () {
var UA = navigator.userAgent;
var iPhone = UA.indexOf('iPhone');
var iPad = UA.indexOf('iPad');
var Android = UA.indexOf('Android');
var Mobile = UA.indexOf('Mobile');
if(iPhone > 0 || Android > 0 && Mobile > 0){
return "スマホ"
}
else if(iPad > 0 || Android > 0){
return "タブレット"
}
else{
return "ＰＣ他"
}
}
}
動作確認
アクセスした端末が何かと、デスクトップW/Hと、クライアントW/Hを表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>プラグインテスト</title>
</head>
<body>
<!-- なでしこ3のエンジンを取り込み -->
<script type="text/javascript" src="https://nadesi.com/v3/cdn.php?v=3.1.5&f=release/wnako3.js&run"></script>
<!-- プラグインを取り込み -->
<script type="text/javascript" src="Plugin_UserInfo.js"></script>
<!-- なでしこのプログラム -->
<script type="なでしこ">
「デバイス：{アクセスデバイス}」のラベル作成。改行作成。改行作成。
「デスクトップ幅 ：{デスクトップ幅}」のラベル作成。改行作成。
「デスクトップ高さ：{デスクトップ高さ}」のラベル作成。改行作成。改行作成。
「クライアント幅 ：{クライアント幅}」のラベル作成。改行作成。
「クライアント高さ：{クライアント高さ}」のラベル作成。
</script>
</body></html>
おわります
取りあえず関数のプラグインも作ってみることが出来ました！ わーいわーい。
でもJavascriptが分かんないから、これ以上はムリかな＞＜
ｖ１のようになでしこの関数が別ファイルから取り込めたら便利なんですけれどね～。
でも、これで、簡単なJavascriptをコピペで何とかなる系は、自分でプラグインにしていけそうだから、良き～♪
需要があるか分かりませんが、完全にわたしの趣味に走っている和の色定数よりかはありそうにも思うので、登録してみる。
ユーザーのデバイスや画面サイズを取得して、れすぽんしぶ的な（？）プログラムにすると、ぽい！ 感じに出来るんだよねぇ～♪
みなさんも是非、ちょっと役立つプラグインを作って、公開してみて下さいね☆
やっぱりつづきます
引数を付けたり、システムを参照したりします。