2022年11月25日

Headless CMSの Strapiを利用する

案件で必要になったのでHeadless CMSの Strapiを利用するためのメモ

続きを読む
posted by ねこまんま at 17:14 | TrackBack(0) | テクニック | 更新情報をチェックする

2022年02月25日

Dockerコマンド

docker compose up イメージ&コンテナ作成&起動
docker compose up -d デタッチド・モード: バックグラウンドでコンテナを実行し、新しいコンテナ名を表示
docker compose down コンテナを停止し、 up で作成したコンテナ・ネットワーク・ボリューム・イメージを削除
docker compose down -v Compose ファイルの `volumes` セクションの名前付きボリュームを削除また、コンテナがアタッチしたアノニマス・ボリュームも削除
posted by ねこまんま at 12:19 | テクニック | 更新情報をチェックする

2021年11月12日

Create React Appで自身が所属するディレクトリにReact Appを生成する

Create React Appでは基本的には自身が所属する下層にReact Appを生成します。

fooというディレクトリにいる場合に以下のコマンドを入力すると /foo/myApp/にアプリケーションがインストールされます。

create-react-app myApp
cd myApp



下層ではなくfooに属するアプリケーションを作成したい場合は以下のコマンドを実行します。

create-react-app .
posted by ねこまんま at 23:12 | テクニック | 更新情報をチェックする

2013年12月11日

続・YouTubeで特定のチャンネルのリストを表示

YouTubeで特定のチャンネルのリストを表示だとIE9以下でエラーで表示できなかったので修正。

getJSON()から$.ajax()に変更、dataによる値の受け渡しができないようなので引数で受け渡すようにしたらIE9以下でも動いた。

$.ajax({
url: 'http://gdata.youtube.com/feeds/api/users/チャンネル名/uploads?v=2&alt=json',
success: function(json){
var items = json.feed.entry;
$.each(items,function(i){
$("#youtube ul").append('<li><a href="'+ items[i].link[0].href +'" target="_blank"><img src="'+items[i].media$group.media$thumbnail[0].url+'" /><p>'+ items[i].title.$t + '</p></a></li>');
});
}
});
posted by ねこまんま at 05:36 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年05月17日

Dust.jsを利用したテンプレートの埋め込み方法

Dust.jsを利用したテンプレートの埋め込み方法

<script id="tmpl" type="text/html">
{bar}
</script>


<script>
var temp = $.trim($("#tmpl").html());
var data = {bar : "fuga"};
var compiled = dust.compile(temp, "intro");
dust.loadSource(compiled);
dust.render("intro", new_data, function(err, out) {
$("#tmpl").after(out);
});
</script>
posted by ねこまんま at 16:28 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年02月08日

a要素のhashプロパティ

ページ内スクロールを実装する以下のようなサンプルスクリプトをどっかでみかけました。ここで注目は「this.hash」、domオブジェクトのa要素はhrefのハッシュ値を簡単に取り出せるっぽいです。

$(function(){
$('a[href^=#]').on('click', function(){
//クリックした要素の#を変数に入れる
var Target = $(this.hash);
//行き先までの画面上の高さの数値を変数に入れる
var TargetOffset = $(Target).offset().top;
//アニメーション時間ミリ秒
var Time = 700;
//集めた情報を元にアニメーション
$('html, body').animate({
scrollTop: TargetOffset
}, Time);
return false;
});
});
タグ:hash
posted by ねこまんま at 11:12 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2013年01月31日

カタカナかどうかチェックする正規表現

■カタカナかどうかチェックする正規表現

/^[ァ-ンァ-ン゙゚]*$/


■全角カタカナかどうかチェックする正規表現

/^[ァ-ン]*$/


■半角カタカナかどうかチェックする正規表現

/^[ァ-ン゙゚]*$/
タグ:正規表現
posted by ねこまんま at 23:17 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年08月30日

特定のオブジェクトがグローバルに存在するかどうかをチェック

特定のオブジェクトがグローバルに存在するかどうかをチェック

in演算子を利用します。

var hoge;
if("hoge" in window){
console.log("ok")
}else{
console.log("ng")
}
タグ:in
posted by ねこまんま at 12:44 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年07月15日

Backborn.js入門

とりあえずBackborn.jsを触ってみた感想

Backborn.jsは単体では動作せず、Underscore.jsとjQuery、json2.jsと合わせて利用する。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>


まずは以下のような基本コードを実行「hello world」を表示してみる

(function($){
var ListView = Backbone.View.extend({
el: $('body'),
initialize: function(){
_.bindAll(this, 'render');
this.render();
},
render: function(){
$(this.el).append("<ul> <li>hello world</li> </ul>");
}
});
var listView = new ListView();
})(jQuery);


initializeメソッドはインスタンス生成時に自動で呼び出されるメソッド、renderはページのレンダリング時に利用するメソッド、_.bindAllはイベント性実行時のthisを固定化するメソッド。

つぎはボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。

(function($){
var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem');
this.counter = 0;
this.render();
},
render: function(){
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
},
addItem: function(){
this.counter++;
$('ul', this.el).append("<li>hello world"+this.counter+"</li>");
}
});
var listView = new ListView();
})(jQuery);


renderメソッドでボタンとul要素を出力して、eventsではイベントを生成しておきます。addItemは数値をアップしながらli要素を追加していきます。

つぎもボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。ただ、文字列をハードコーディングせず、modelで管理

(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});
var List = Backbone.Collection.extend({
model: Item
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);
this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
$('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
}
});

var listView = new ListView();
})(jQuery);


新たにmodelを追加、modelはBackbone.Collectionに渡すことでviewとの連携が可能になります。モデルはthis.collectionに保存。addというイベントとしてappendItemメソッドにバインドします。

次はViewをItemとList2つに分けて管理
(function($){
var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li',
initialize: function(){
_.bindAll(this, 'render');
},
render: function(){
$(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
return this;
}
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');

this.collection = new List();
this.collection.bind('add', this.appendItem);

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},

appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});

var listView = new ListView();
})(jQuery);


最後は削除や編集を取り入れたバージョン

(function($){
Backbone.sync = function(method, model, success, error){
success();
}

var Item = Backbone.Model.extend({
defaults: {
part1: 'hello',
part2: 'world'
}
});

var List = Backbone.Collection.extend({
model: Item
});

var ItemView = Backbone.View.extend({
tagName: 'li',
events: {
'click span.swap': 'swap',
'click span.delete': 'remove'
},
initialize: function(){
_.bindAll(this, 'render', 'unrender', 'swap', 'remove');
this.model.bind('change', this.render);
this.model.bind('remove', this.unrender);
},
render: function(){
$(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span>     <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
return this;
},
unrender: function(){
$(this.el).remove();
},
swap: function(){
var swapped = {
part1: this.model.get('part2'),
part2: this.model.get('part1')
};
this.model.set(swapped);
},
remove: function(){
this.model.destroy();
}
});

var ListView = Backbone.View.extend({
el: $('body'),
events: {
'click button#add': 'addItem'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem');
this.collection = new List();
this.collection.bind('add', this.appendItem);

this.counter = 0;
this.render();
},
render: function(){
var self = this;
$(this.el).append("<button id='add'>Add list item</button>");
$(this.el).append("<ul></ul>");
_(this.collection.models).each(function(item){
self.appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
part2: item.get('part2') + this.counter
});
this.collection.add(item);
},
appendItem: function(item){
var itemView = new ItemView({
model: item
});
$('ul', this.el).append(itemView.render().el);
}
});
var listView = new ListView();
})(jQuery);


参考:Hello Backbone.js
タグ:Backborn.js
posted by ねこまんま at 04:21 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年05月22日

Safariかどうか判別する

Google ChromeとSafariで日本語のlocation.hashの違い(参考:ブラウザごとのlocation.hashの挙動のまとめ - ?D of K)から条件分岐して対応しなくてはいけなくなったので簡単なメモ。

$.browser.safariだと$.browser.webkitと同じ意味でGoogleChromeも検出してしまいます。

つぎのようにUserAgentにSafariをふくんでChromeを含まない場合のみに処理を行うとよい。

if( navigator.userAgent.indexOf("Safari") > 0 &&
navigator.userAgent.indexOf("Chrome") < 0 ){
location.hash = "#"+encodeURIComponent(”ほげ”)
}else{
location.hash = "#"+”ほげ”
}

posted by ねこまんま at 16:42 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年03月02日

JavaScriptやCSSを圧縮する

JavaScriptやCSSを圧縮するにはYUI Compressorがあるけどオンラインでサクっと圧縮したい場合は以下のサイト使えばいいかも。

Online JavaScript/CSS Compression Using YUI Compressor
タグ:javascript CSS YUI
posted by ねこまんま at 18:13 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月25日

popstateで戻るボタンを押された際の挙動を制御する

popstateで戻るボタンや進むボタンを押された際の挙動を制御することができます。

$(function(){
setTimeout(function(){
window.addEventListener('popstate', function() {
$("body").append("<p>aa</p>")
},100);
})
});


dom ready時に発火してしまうので100ミリ秒後にバインド。ページ遷移後に戻るボタンが押されたらイベントが発火します。pushState時に設定したデータを取得することも可能。

WebKit Android: 2.2 〜 2.3のみ、iOS : 4.2〜5.0のみで動作します。参考
posted by ねこまんま at 11:14 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月19日

AmazonWebサービスのエラーを修正

作成したツールが動かなくなったので色々と修正。

まず、2012年2月22日で2011-08-01バージョンを除くバージョンが停止してしまったらしいのでVersionを「2011-08-01」に変更。

それでも動かず、どうもAssociateTagが必須になったらしくAssociateTagを追加すると動き出すようになりました。

Amazon Product Advertising APIの利用方法は「Amazon Product Advertising API」や「hash_hmac をPHP4で利用するライブラリ」を参照。
posted by ねこまんま at 17:29 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月12日

keyframesをJavaScriptで制御

createElementでstyle要素を作成することでkeyframesのアニメーションをJavaScriptで動的に生成できる。

var main01main = [
"0% {left:100px}",
"50% {left:200px}",
"100% {left:300px}"
];
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes main01main {'+
main01main.join(" ")+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
posted by ねこまんま at 01:34 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年02月06日

JavaScriptでランガムに画象を表示する

JavaScriptで配列に画象を入れておいてランガムに表示する方法

var images = ["dummy01.png","dummy02.png","dummy03.png"];
var i = Math.ceil(Math.random() * images.length | 0);
document.write("<img
タグ:javascript
posted by ねこまんま at 14:17 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

JavaScriptでcookieの書き出しを行う

JavaScriptでcookieの書き出しを行う関数

function setCookie(key, val, tmp) {
tmp = key + "=" + escape(val) + "; ";
tmp += "expires=Tue, 31-Dec-2030 23:59:59; ";
document.cookie = tmp;
console.log(document.cookie)
}
function getCookie(key, tmp1, tmp2, xx1, xx2, xx3) {
tmp1 = " " + document.cookie + ";";
xx1 = xx2 = 0;
len = tmp1.length;
while (xx1 < len) {
xx2 = tmp1.indexOf(";", xx1);
tmp2 = tmp1.substring(xx1 + 1, xx2);
xx3 = tmp2.indexOf("=");
if (tmp2.substring(0, xx3) == key) {
return(unescape(tmp2.substring(xx3 + 1, xx2 - xx1 - 1)));
}
xx1 = xx2 + 1;
}
return("");
}


jQuery 使ってる場合はjQuery Cookieとか使うとよさげ

via:Cookie(JavaScript版)のソースコード

via
タグ:Cookie
posted by ねこまんま at 14:14 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2012年01月20日

JavaScriptで互換モードかどうか確認する

IE8には標準のIE8標準準拠モード 以外に互換モードという描画モードが用意されていてこれが色々と問題を引き起こす。

document.documentMode;


というプロパティが5の場合は互換モードなので

if(document.documentMode && document.documentMode == 5) {
myMode = true;
}


とかで互換モードの場合のみフラグを付けることができる
posted by ねこまんま at 12:16 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年12月17日

jQueryで画像の縦横を揃える

画像の縦横を揃える、横幅が多い場合は168pxいないで表示して、高さがあふれる場合は111px以下に縮小する方法

<img src="products.gif" width="168" />


画像には属性をつけて横幅を縮小しておく。その上で以下のjQueryスクリプトを実行する

$(window).load(function(){
$(".hoge img").each(function(){
if($(this).height()>111){
$(this).removeAttr("width").height(111)

}
})
});


そうすると画象の縦横比を崩さずに縦が111px以内、横が168px以内に縮小できる。
タグ:jquery
posted by ねこまんま at 17:52 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年11月06日

Facebookコメントを通知する

Facebookのコメントソーシャルプラグインをページ内に配置すると簡単にコメント機能を実装することができますが、いつコメントがあったかを通知してくれません。

Comment Moderation Toolを利用すると、どのページにどんなコメントが書かれているかを見ることができます。(fb:app_idの設定が必要)

さらに、コメントプラグインの「設定」からモデレーターを指定することで、コメントがあった際にモデレーターにも通知が行くようになります。

posted by ねこまんま at 01:25 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする

2011年10月28日

Firefoxでスクロール位置がリセットされる現象に対応する

Firefoxでhtml要素にoverflow:hiddenを指定しているとscrollToメソッドなどでスクロール位置の制御ができない。

overflow:hiddenなどを指定しておいてscrollToメソッドなどでスクロール位置を変更することは可能だがその後html要素をoverflow:hiddenに変更すると初期値の戻ってしまう。

document.defaultViewで対応可能で、色々試したところクロスブラザを考えると次のようなコードになる

window.scrollTo(0,0);
$("html").css("overflow","hidden");
if(document.defaultView)document.defaultView.scrollTo(0,0);


via:スクロール位置を維持しつつ web ページ全体のスクロールをできないようにする方法 (web ページのスクロール位置固定) - vivid memo
posted by ねこまんま at 11:45 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする