続きを読む
2022年11月25日
2022年02月25日
Dockerコマンド
docker compose up イメージ&コンテナ作成&起動
docker compose up -d デタッチド・モード: バックグラウンドでコンテナを実行し、新しいコンテナ名を表示
docker compose down コンテナを停止し、 up で作成したコンテナ・ネットワーク・ボリューム・イメージを削除
docker compose down -v Compose ファイルの `volumes` セクションの名前付きボリュームを削除また、コンテナがアタッチしたアノニマス・ボリュームも削除
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/にアプリケーションがインストールされます。
下層ではなくfooに属するアプリケーションを作成したい場合は以下のコマンドを実行します。
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以下でも動いた。
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>');
});
}
});
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>
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
2013年01月31日
カタカナかどうかチェックする正規表現
■カタカナかどうかチェックする正規表現
■全角カタカナかどうかチェックする正規表現
■半角カタカナかどうかチェックする正規表現
/^[ァ-ンァ-ン゙゚]*$/
■全角カタカナかどうかチェックする正規表現
/^[ァ-ン]*$/
■半角カタカナかどうかチェックする正規表現
/^[ァ-ン゙゚]*$/
タグ:正規表現
2012年08月30日
特定のオブジェクトがグローバルに存在するかどうかをチェック
特定のオブジェクトがグローバルに存在するかどうかをチェック
in演算子を利用します。
in演算子を利用します。
var hoge;
if("hoge" in window){
console.log("ok")
}else{
console.log("ng")
}
タグ:in
2012年07月15日
Backborn.js入門
とりあえずBackborn.jsを触ってみた感想
Backborn.jsは単体では動作せず、Underscore.jsとjQuery、json2.jsと合わせて利用する。
まずは以下のような基本コードを実行「hello world」を表示してみる
initializeメソッドはインスタンス生成時に自動で呼び出されるメソッド、renderはページのレンダリング時に利用するメソッド、_.bindAllはイベント性実行時のthisを固定化するメソッド。
つぎはボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。
renderメソッドでボタンとul要素を出力して、eventsではイベントを生成しておきます。addItemは数値をアップしながらli要素を追加していきます。
つぎもボタンをクリックした際に「hello world1」、「hello world2」と連番で出力するサンプル。ただ、文字列をハードコーディングせず、modelで管理
新たにmodelを追加、modelはBackbone.Collectionに渡すことでviewとの連携が可能になります。モデルはthis.collectionに保存。addというイベントとしてappendItemメソッドにバインドします。
次はViewをItemとList2つに分けて管理
最後は削除や編集を取り入れたバージョン
参考:Hello Backbone.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
2012年05月22日
Safariかどうか判別する
Google ChromeとSafariで日本語のlocation.hashの違い(参考:ブラウザごとのlocation.hashの挙動のまとめ - ?D of K)から条件分岐して対応しなくてはいけなくなったので簡単なメモ。
$.browser.safariだと$.browser.webkitと同じ意味でGoogleChromeも検出してしまいます。
つぎのようにUserAgentにSafariをふくんでChromeを含まない場合のみに処理を行うとよい。
$.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 = "#"+”ほげ”
}
2012年03月02日
JavaScriptやCSSを圧縮する
JavaScriptやCSSを圧縮するにはYUI Compressorがあるけどオンラインでサクっと圧縮したい場合は以下のサイト使えばいいかも。
Online JavaScript/CSS Compression Using YUI Compressor
Online JavaScript/CSS Compression Using YUI Compressor
2012年02月25日
popstateで戻るボタンを押された際の挙動を制御する
popstateで戻るボタンや進むボタンを押された際の挙動を制御することができます。
dom ready時に発火してしまうので100ミリ秒後にバインド。ページ遷移後に戻るボタンが押されたらイベントが発火します。pushState時に設定したデータを取得することも可能。
WebKit Android: 2.2 〜 2.3のみ、iOS : 4.2〜5.0のみで動作します。参考
$(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のみで動作します。参考
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で利用するライブラリ」を参照。
まず、2012年2月22日で2011-08-01バージョンを除くバージョンが停止してしまったらしいのでVersionを「2011-08-01」に変更。
それでも動かず、どうもAssociateTagが必須になったらしくAssociateTagを追加すると動き出すようになりました。
Amazon Product Advertising APIの利用方法は「Amazon Product Advertising API」や「hash_hmac をPHP4で利用するライブラリ」を参照。
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);
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
JavaScriptでcookieの書き出しを行う
JavaScriptでcookieの書き出しを行う関数
jQuery 使ってる場合はjQuery Cookieとか使うとよさげ
via:Cookie(JavaScript版)のソースコード
via
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
2012年01月20日
JavaScriptで互換モードかどうか確認する
IE8には標準のIE8標準準拠モード 以外に互換モードという描画モードが用意されていてこれが色々と問題を引き起こす。
というプロパティが5の場合は互換モードなので
とかで互換モードの場合のみフラグを付けることができる
document.documentMode;
というプロパティが5の場合は互換モードなので
if(document.documentMode && document.documentMode == 5) {
myMode = true;
}
とかで互換モードの場合のみフラグを付けることができる
2011年12月17日
jQueryで画像の縦横を揃える
画像の縦横を揃える、横幅が多い場合は168pxいないで表示して、高さがあふれる場合は111px以下に縮小する方法
画像には属性をつけて横幅を縮小しておく。その上で以下のjQueryスクリプトを実行する
そうすると画象の縦横比を崩さずに縦が111px以内、横が168px以内に縮小できる。
<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
2011年11月06日
Facebookコメントを通知する
Facebookのコメントソーシャルプラグインをページ内に配置すると簡単にコメント機能を実装することができますが、いつコメントがあったかを通知してくれません。
Comment Moderation Toolを利用すると、どのページにどんなコメントが書かれているかを見ることができます。(fb:app_idの設定が必要)
さらに、コメントプラグインの「設定」からモデレーターを指定することで、コメントがあった際にモデレーターにも通知が行くようになります。
Comment Moderation Toolを利用すると、どのページにどんなコメントが書かれているかを見ることができます。(fb:app_idの設定が必要)
さらに、コメントプラグインの「設定」からモデレーターを指定することで、コメントがあった際にモデレーターにも通知が行くようになります。
2011年10月28日
Firefoxでスクロール位置がリセットされる現象に対応する
Firefoxでhtml要素にoverflow:hiddenを指定しているとscrollToメソッドなどでスクロール位置の制御ができない。
overflow:hiddenなどを指定しておいてscrollToメソッドなどでスクロール位置を変更することは可能だがその後html要素をoverflow:hiddenに変更すると初期値の戻ってしまう。
document.defaultViewで対応可能で、色々試したところクロスブラザを考えると次のようなコードになる
via:スクロール位置を維持しつつ web ページ全体のスクロールをできないようにする方法 (web ページのスクロール位置固定) - vivid memo
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