4:3
3:4
16:9
1:1
free
円
リンクサムネイル
参考リンク：リンクサムネイルその1ad
参考リンク：リンクサムネイルその２（下）
Hello world!
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
忍者エディター準備
参考リンク：DOM生成
乱数：nJa_.func.random(桁数)
//どっちでもOK！
nJa_.func.random(3)
nJa_.func.random('3')
忍者エディターユニットてすと1
文字が入れてある場合
JavaScript
//てすと１を元に関数化
//vanilla、jquery両方で動作確認
nJa_.lays.nJa(document.querySelector('#hogehoge2'));
nJa_.lays.nJa($('#hogehoge2'));
補助関数：要素の動的生成
これって普通にありそうだよな・・・。
JavaScript
var hoge = {
target:’挿入先（親）’, //省略不可
id:'hogeid', //省略可:省略時タイムスタンプIDが付与
class:['uni-nj','col'], //省略可
tag:'div', //省略可 default ⇨ div
data:'ダミーデータ
', //省略可
click: function(e){ //省略可
e.target.classList.toggle('toggle'); //e.target クリックされた要素
$tool.classList.toggle('active');
},
};
var $wrap = nJa_.lays.elm.append(hoge);
var $wrap = nJa_.lays.elm.prepend(hoge);
var $wrap = nJa_.lays.elm.after(hoge);
var $wrap = nJa_.lays.elm.before(hoge);
lodash _template：テンプレートエンジン
//lodash _template
//templateは、このように記述している例が多い。
// 利用の際に.innerHTMLで取得する必要あり。
//テンプレート晒すのは、なんだし、見た目も汚いし、
var $template = document.getElementById('template');
var compile = _.template($template.innerHTML)
//変数にtemplateを入れとけば、
var tmpleA = '<%= name %>
';
//シンプルに以下でOK！
var compile = _.template(tmpleA)
//データを渡して、コンパイル(html要素生成)
let html = compile({
name: 'hoge'
});
//生成した要素のターゲットに入れる
var $target = document.getElementById('target');
//この場合は中身を入れ替えるパターン！
$target.innerHTML = html;
//テンプレにデータを当てはめる
nAn.func.tmplout($tmpl,$data)
//テンプレにデータを当てはめて、ターゲットに挿入 html=差し替え top=最初に挿入 last=最後に挿入
nAn.func.tmpl($trg,$html,$data,$posi);
JSONデータと生データ
JSONデータ：画像系・埋込文書
生データ：テキスト系
ソートの動作確認(静的要素)
//ハンドル要素に以下を設定すると、スマホタブレットで落ちる！！！！！
pointer-events: auto!important;
+この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。その１
+この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。その２
+この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。その３この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。
+この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。その４
+この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。その５
+この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。レイアウトを確認するための文章ですので意味はありません。その６
ソートの動作確認(動的要素)
ソートのテスト
resize
resize
resize
resize
resize
resize
.resize { resize: both; overflow: auto; }
Click to make me resizable