2019年01月14日

FirebaseHostingを利用してホスティング環境をデプロイする

Firebaseでプロジェクトを作成して左メニューからHostingを有効にしておく、あとはコマンドラインから。

まずはFirebas toolsをインストールしておく

npm install -g firebase-tools


まずはログイン

firebase login


以下のように聞かれるのでyesを選択

? Allow Firebase to collect anonymous CLI usage and error report
ing information?


ブラウザが開くのでFirebaseを利用しているGoogleのアカウントを選択しよう。

firebase init


ここでhostingを選択して、Firebaseでプロジェクトが選択できる場合は選択、選択できない場合は[don't setup a default project]を選んでおく ( あとでFirebase use −addコマンドで追加できる

デプロイするディレクトリとすべてのURLのエイリアスを/index.htmlにするSPAモードの選択ができる

? What do you want to use as your public directory? 
? Configure as a single-page app (rewrite all urls to /index.htm
l)?


これで、firebase.jsonファイルと.firebasercファイルが作成される

あとは以下のコマンドでデプロイできるはず

firebase deploy







posted by ねこまんま at 16:29 | テクニック | 更新情報をチェックする

Vue CLIを使ってVueの環境を作成する

まずはvue-cliをグローバルにインストール

npm install -g vue-cli


インストール内容を exec $SHELL -l で反映すればvueコマンドが利用できるので -h オプションでヘルプを表示してみましょう

exec $SHELL -l
vue -h


vue init コマンドでプロジェクトを作成

vue init webpack-simple vue-cli-sample


インストールができたらディレクトリに移動してnpmのインストールと実行を行います

cd vue-cli-sample
npm install
npm run dev


http://localhost:8080/ に移動するとVueプロジェクトが実行されているのを確認できます。

src/App.js のmsgなどを変更するとhttp://localhost:8080/ も変更されるのを確認することができます。

<script>
export default {
name: 'app',
data () {
return {
msg: 'Vue CLIを使ってVueの環境を作成する'
}
}
}
</script>


posted by ねこまんま at 15:32 | テクニック | 更新情報をチェックする

2019年01月12日

FirebaseとNuxt.jsを使ってユーザ認証関係2

FirebaseとNuxt.jsを使ってユーザ認証関係の続き。

前回はメールアドレスとパスワードを入力してアカウントを作成したが、今回はメールアドレス入力→確認メール→認証画面というフローでユーザ認証ができるように変更していきます。
posted by ねこまんま at 13:22 | テクニック | 更新情報をチェックする

2019年01月09日

TypeScriptのreadonly修飾子とReadonly型

TypeScriptではプロパティにreadonly修飾子とつけることで再書き込みができないプロパティを定義することができます。

interface Foo {
readonly prop: string
}
const foo: Foo = {
prop: `ok`
}
foo.prop = `ng` // Error


Classプロパティも同様でreadonly修飾子をつけたものは変更ができない

class Foo {
readonly prop = `ok`
constructor() {
this.prop = `ng` // ng
}
}


また、Readonly型も用意されておりReadonly型にキャストすることで変更不可にすることもできる。

type Foo = {
prop: string
}
type FooReadonly = Readonly<Foo>
const foo: FooReadonly = {
prop: `ok`
}
foo.prop = `ng` // Error


参考: Readonly · TypeScript Deep Dive
posted by ねこまんま at 15:18 | テクニック | 更新情報をチェックする

2018年12月14日

FirebaseとNuxt.jsを使ってユーザ認証関係

via: FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる

経験が少ない技術のキャッチアップがてらにサンプルをひたすら写経シリーズ。

初期設定



npx create-nuxt-app nuxt_firebase


でインストールして以下のコマンドで実行

cd nuxt_firebase
npm run dev


これで http://localhost:3000/ にアクセスできます。楽

Firebaseをインストールして

npm install firebase


pluginsの中にfirebase.jsを作成

import firebase from 'firebase'

if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: "API_KEY",
authDomain: "APP_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "1234567890"
})
}

export default firebase


各種の設定はFirebaseプロジェクトの「ウェブアプリに Firebase を追加」から取得できる。

また、左メニューのAuthenticationよりログイン方法のメール / パスワードを有効にして、サンプルユーザーを作成しておく

ストア設定



export const strict = false

export const state = () => ({
user: null,
})

export const mutations = {
setUser (state, payload) {
state.user = payload
}
}

export const actions = {
setUser ({ commit }, payload) {
commit('setUser', payload)
}
}

export const getters = {
isAuthenticated (state) {
return !!state.user
}
}



ログイン機能




/pages/index.vueを以下のように変更しておく

<template>
<div>
<!-- ログイン中に表示される画面 -->
<div v-if="isAuthenticated">
{{ user.email }}でログイン中です<br>
<button v-on:click="logout">ログアウト</button><br>
<a href="/member-page">メンバーページへ</a>
</div>
<!-- ログインしていない時に表示される画面 -->
<div v-else>
メール<br>
<input type="text" v-model="email"><br>
パスワード<br>
<input type="password" v-model="password"><br>
<button v-on:click="login">ログイン</button>
</div>
</div>
</template>

<script>
import firebase from '~/plugins/firebase'
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
data() {
return {
email: '',
password: ''
}
},
computed: {
...mapState(['user']),
...mapGetters(['isAuthenticated'])
},
mounted() {
firebase.auth().onAuthStateChanged((user) => {
this.setUser(user)
})
},
methods : {
...mapActions(['setUser']),
login() {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then(user => {
// ログインしたら飛ぶページを指定
// this.$router.push("/member-page")
}).catch((error) => {
alert(error)
});
},
logout() {
firebase.auth().signOut()
.then(() => {
this.setUser(null)
}).catch((error) => {
alert(error)
})
}
}
}
</script>


これによりログイン時と未ログイン時に状況を切り替えることができる。

ここまでは参考サイトのほぼ引用。
ここからは独自の内容。

アカウント作成



index.vueにアカウント作成用にページへのURLを追加して

      <button v-on:click="login">ログイン</button>
<p><a href="/register-user">新規会員登録</a></p>
</div>
</div>
</template>


/pages/register-user.vueを以下のように設定する

<template>
<div>
メール<br>
<input type="text" v-model="email"><br>
パスワード<br>
<input type="password" v-model="password"><br>
<p v-if="error_code==='auth/invalid-email'">メールアドレスが不正です</p>
<button v-on:click="registerUser">登録</button>
</div>
</template>

<script>
import firebase from '~/plugins/firebase'
import { mapActions } from 'vuex'
export default {
data() {
return {
email: '',
password: '',
error_code:''
}
},
methods : {
...mapActions(['setUser']),
registerUser() {
firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
.then(user => {
this.setUser({
email:this.email,
password:this.password
})
this.$router.push("/")
})
.catch(error =>{
this.error_code = error.code
});
}
}
}
</script>


これでアカウント作成成功時にはストアにアカウント情報を登録してindexページに遷移、入力内容が不正な場合はエラーをヒュウ視することができる
posted by ねこまんま at 11:54 | テクニック | 更新情報をチェックする

2018年09月03日

Jest + enzyme でテストを書く

Jest + enzyme でテストを書いていく

まずはJestのインストール

npm install --save-dev jest


npm install --save-dev babel-jest babel-core regenerator-runtime


sum.jsを以下のようにして

export default sum = (a, b) => a + b


同階層にsum.test.jsを配置

import sum  from './sum'

test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
})


expectで評価したい値を、toBe(X)で値をどう評価したいかを記述する
posted by ねこまんま at 09:58 | テクニック | 更新情報をチェックする

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) | テクニック | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。