non-standard world株式会社
感性と論理を使い、健やかに成長するShopifyサイトをお客様とともに作る 私たちは、Shopifyに特化した共創型デザインファームです shopify consulting & development Shopifyコンサルティング、サイト構築 次世代EC技術「ヘッドレスコマース」によるサイト構築をはじめとした高いITリテラシーと、それをビジネスと結びつけた構築を行います。 発注・受注の関係ではなく、ともにつくる仲間として、伴走型のサービスを提供します。 市場セグメントやターゲットから逆算したコンサルティングではなく、「今、ここにいる」クライアント様が何を持っていて、何を紡ぐことができるかという視点からコンサルティングを行うことで、クライアント様自身では気づけなかった魅力を引き出します。
Nuxt.jsとFirebase Authenticationでログイン認証を作る | non-standard world株式会社
こんにちは、エンジニアの高崎です。 Nuxt.jsとFirebaseを使って簡単なメモを取るWEBサービスを作るこの特集、前回は導入のためのセットアップをしました。今回はNuxt.jsとFirebase Authentication（ログイン認証）を使ってGoogleアカウントでログインする機能を実装します。 Googleのログイン認証を有効にする １．Firebaseのコンソールにログインします。 ２．プロジェクトを選択し、表示されるトップページの赤枠をクリックします。 3.Nuxt.jsのプロジェクトをフォルダに戻って/pluginsフォルダの中に下記のようなfirebase.jsを作ります。 4.２の画面で表示される画面を参考にapiKey〜messagingSenderIdまでをご自身のプロジェクトのものに変更します。 apiKey: "ここにAPIキーが入ります", authDo
【Firebase】Vue.jsで作ったWebアプリを公開する方法を解説【初心者向け】
誰向けの内容か？ この記事は下記のような悩みがある方に向けた内容となっています。 もし該当するものがあれば、ぜひFirebaseを試してみてください。 「制作したポートフォリオをできるだけ簡単に公開したい」 「Vue.jsやReactを使ってWebサービスを作りたいけれど、バックエンドは苦手なので避けたい」 「フロントエンドの勉強で何か作りたいけれど、バックエンドの実装に時間を掛けたくない」 Firebaseのメリット Firebaseは”mBaaS”(mobile Backend as a Service)、または”BaaS”(Backend as a Service)と呼ばれるサービスです。 Backendとあるように、Firebaseはバックエンド（サーバサイド）の機能を提供しています。 Firebaseを使うと、バックエンド機能をある程度まかなうことができるようになります。 サーバ
Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita
最初に この記事はVue.js アドベントカレンダー#4 25日目の記事です。 この一ヶ月でVue.jsについてのナレッジが100記事増えたことになります。やったね！！ 2018/8/2 追記 現在では vue-cli の3.x.xがリリースされており、スキャフォールドからVueプロジェクト作成の工程が若干異なりますのでご留意ください。 この記事でやること バックエンドをFirebaseに丸投げしたユーザ登録 → サインイン → サインアウト までのチュートリアルです。 認証の実装は面倒 フロントエンドの技術を使ってちょっとしたアプリケーションを作った時、認証やユーザ管理を実装するのはそれなりに面倒かと思います。フレームワークの選定、DBは何使う?など決めなければならないこと、覚えなくてはならないことがたくさんありますね。 そこでBaaSを使います。 BaaSって？ Backend as
AdobeXDでBulmaのUIキットを作りました！【無料配布】 | とんよー。ブログ
BulmaのUIキット作りました！ BulmaのUIキットです。無料ですのでお使いください！ Bulma好きが高じて、BulmaのパーツやコンポーネントなどのUI一式をまとめたAdobe XDファイル作ってしまいました（笑）。 せっかくですので、無料配布します。使ってみたい方はぜひダウンロードしてください。 BulmaのUIを一通り網羅していますので、これであらかたのデザインは作れると思います。 下記のボタンからファイルをダウンロードできます。 ※ダウンロード前に下記の注意事項をお読みください。 Bulma-UIキットをダウンロードする 注意事項 みなさまが当Adobe XDファイルをダウンロードし、使用することによって、コンピュータやソフト、または業務に支障・障害が生じた場合、いかなる理由によるものでも一切責任を負いません。あらかじめご了承ください。 当データは、Adobe XDのバージ
さらに知っておくと少し幸せになれるBulmaを使い方+5選 | とんよー。ブログ
Bulmaはいいぞ(2回目) やあ （´・ω・｀) ようこそ、とんよー。ブログへ。 このプロテインはサービスだから、まず飲んで落ち着いて欲しい。 うん、「また」なんだ。済まない。 …というわけで前回の記事（知っておくと少し幸せになれるBulmaを使い方6選）では、紹介しきれなかった「知っておくと少し幸せになれるBulmaを使い方」をさらに5点紹介します。 ※本ブログのBulmaに関する記事はこちらです。 Bulmaってなんぞ？って方はまずこちらを見るのをおすすめします。 > 私的おすすめcssフレームワーク「Bulma」その1 > 私的おすすめcssフレームワーク「Bulma」その2 さて今回は以下の項目について紹介しますね。 ブレイクポイント Container レスポンシブヘルパー カラムサイズ カラムのOffset ブレイクポイント Bulmaには、デフォルトで5つのブレイクポイント
知っておくと少し幸せになれるBulmaを使い方6選 | とんよー。ブログ
Bulmaはいいぞ 以前、本ブログで紹介したCSSフレームワーク「bulma」。 最近になってアップデートが行われ、バージョン0.7.1になったようですね。 サイトもキレイにリニューアルされています。 本ブログのBulmaに関する記事はこちらです。Bulmaってなんぞ？って方はまずこちらを見るのをおすすめします。 > 私的おすすめcssフレームワーク「Bulma」その1 > 私的おすすめcssフレームワーク「Bulma」その2 さて今回の記事ですが、Bulmaを使いはじめた方が知っておくと少し幸せになることを紹介します。 私がBulmaを初めて使った時に「ここどうするんだろう？」と疑問に思ったところを中心にまとめてみました。 Bulmaを使いはじめた方はぜひ本記事を読んできただければ、と思います。 知っておくと幸せになれるBulmaを使い方6選 複数行のカラム カラムのモバイル対応 カラム
Bulma公式サイトから見るBulmaとBootstrapの違い | とんよー。ブログ
Bootstrap使いのためのBulma解説サイトがあります Bulmaの公式サイトを眺めていたところ、気になるページを見つけました。 それがこちら。> Coming from Bootstrap どうやらBootstrapを使っている人向けのBootstrapとBulmaの違いの解説ページのようですね。 BootstrapとBulmaのそれぞれの特徴・違いが、簡単にですが説明されています。 私もCSSフレームワークはBootstrapをメインで使っていましたが、現在はBootstrap・Bulmaをメインで使っています。BootstrapからBulmaに入った口です。 今回は自分の勉強・復習も兼ねてComing from Bootstrapを参考に、BootstrapとBulmaの違いを書いてみたいと思います。 ※英語がてんでダメなので間違っていたらごめんなさい。 Bulmaってなんぞ？
モーダルにアニメーションをつけ、Vue.jsで実装する - Qiita
表示/非表示のアニメーションを、Vue.jsで書こうとするとき、何回もどうやるんだっけ？ってなるので、メモ。 というか、回りくどいことしてますが、結論BulmaとVue.jsでできているモーダルにアニメーション付けたいってことだったと書いてから思いました。 モーダルにアニメーションをつける 使うモーダルコンポーネント Bulma(CSSフレームワーク)のモーダル こちらのモーダルにアニメーションつけてみたいと思います。 ふんわり表示するアニメーションサンプル ふんわり表示/非表示するモーダル こちらのふんわりのアニメーションをつけようと思います。 jQueryでアニメーションをつける アニメーションのサンプルはcheckboxを使ってますが、よく使うclassを追加するタイプにするため、jQueryで書きます。 サンプルのアニメーションが display: none; で切り替えるタイプで
CSSフレームワークのススメ - BULMAの導入と覚え書き - Qiita
はじめに Webサイトの三大要素「HTML」「JavaScript」「CSS」。 HTMLは内容と構造を、JavaScriptは振る舞いを、CSSは表現を受け持つと言われます。 私は普段バックエンド中心に仕事をしているエンジニアなんですが、たまにフロントをやっても、凝ったデザインのサイトの場合はCSSはデザイナーさんにより用意されていたり、引き継ぎで古の謎のCSSを魔改造していったりなどで、0からCSSをいじる機会はあまりありませんでした。 最近趣味で作っているサイトの「モダンなデザイン」のために、「表現の枠組み」たるCSSフレームワークを勉強し始めたのですが、そこでやっと、遅まきながら、CSSフレームワークを使うと「ものすごく楽」という当たり前といえば当たり前の事に気が付きました。 CSSフレームワークは、プログラム言語のフレームワークとは趣が異なります。 プログラミングにおいては多大な
テスト環境で使えるクレジットカード番号 - Qiita
実在するカード番号を利用することもできます。 カードの番号として妥当であれば上記以外の番号も利用することができます。 こちらのページで、番号の確認ができます。 【PHP】クレジットカードチェックサンプル カード番号以外の情報について 基本的に何でも大丈夫です。 名前・・・スペース区切りで名字と氏名を記入した名前なら何でも使用できます。(例: Taro Tanaka) 有効期限・・・現在時刻より未来の年月を有効期限として指定してください。 セキュリティーコード・・・適当な任意の3桁か4桁の数字を入れてください。 エラーさせるカード番号 テスト環境では、有効期限切れや、カード会社に決済を拒否されたり、偶発的に接続へ失敗した場合などに発生する例外（card_error）を、以下の番号を指定することで意図的に発生させることができます。 クレジットカード番号 card_errorのcode エラー内
コンテナ・セキュリティ入門 脆弱性 - Qiita
コンテナイメージのレジストリでは、脆弱性検査の実装が当たり前になっている。企業でKubernetesなどコンテナを使用するにあたって脆弱性対策がどれほど重要なものか理解するために、脆弱性検査や、関連する国際的な標準について整理した。 脆弱性（ぜいじゃくせい）とは 脆弱性とは、プログラムの動作の不備を悪用される情報セキュリティ上の弱点である。つまり、ソフトウェア上の問題が原因となって生じた欠陥であり、セキュリティホールとも呼ばれる。当然、ソフトウェア開発者は、脆弱性を産まないように細心の注意を払ってコード開発を進めるが、開発者が利用するオペレーティングシステムのライブラリやパッケージに含まれることもある。そのような事情から、開発者の責任範囲外に原因がある場合も多くある。 潜在的な脆弱性を突いた新たなクラッキングの手口が、時間の経過ともに発見される。そのことから、開発当初はコードに脆弱性は無い
Goを始めて1年間で最高にお世話になったGo関連ブックマークを晒します。 - Qiita
自分は普段はChromeのブックマークを使ってよく見返す記事を保存しています。Goを一年間書いてきてブックマークを整理したのですが、せっかくなのでお世話になったブックマーク記事を晒します。 Blog & Serial The Go Blog Goの公式ブログ。深いところまでしっかり書かれているので、調べたいトピックはまずはここで調べたい。 https://blog.golang.org/ Practical Go GoのcontributorであるDave Cheneyさんのブログです。Goで開発&運用する上でのアドバイスが書かれており、入門記事だけでは得られないノウハウがふんだんにまとめられています。 https://dave.cheney.net/practical-go Goならわかるシステムプログラミング @shibukawaさんの連載です。Goで低レイヤーを学んでいきます。根底の
Googleが繰り返すデザイン変更からたどり着いた極意「明白こそが至高」について解説
by Rajeshwar Bachu GoogleはGoogle検索やGmailなどさまざまなプロダクトを作成していますが、そういったプロダクトをデザインする中で得た知見などをまとめるためのデザイナー・開発者たちによる共同プロジェクト「Google Design」が存在します。そのGoogle Designが、「明白なUIこそ至高のUIである」として、ユーザーインタフェース(UI)デザインにおいて重要な要素をまとめて解説しています。 The Obvious UI is Often the Best UI - Google Design - Medium https://medium.com/google-design/the-obvious-ui-is-often-the-best-ui-7a25597d79fd デザイナーはプロダクトができる限り使いやすく、可能な限り誘導的なものになるよ
10分でわかる「今更だけどTypeScriptってなに？」 - Qiita
2年ぶりくらいに業務で TypeScript をやることになったので、個人的なおさらい用です。 TypeScript とは JavaScript は現在 Web アプリケーションの開発で最も使われているものの、JavaScript 独特の癖や、型の認識が緩いこと、ブラウザによって挙動に違いがあります。 それらを補うために altJS というアプローチがあります。JavaScript の機能を拡張し、よりメンテナンスしやすく、高機能にするものです。 それをトランスパイル（変換）することでブラウザによる挙動の違いを吸収したピュアな JavaScript が吐き出され、安全に JavaScript にはまだ無い機能を擬似的に使えるようにすることができます。 その中で現在デファクトスタンダードとなっているのが、TypeScriptです。 なぜ TypeScript が人気なのか 近年の Web 開
TypeScriptの型入門 - Qiita
TypeScriptは型がついたJavaScriptです。プログラミングにおいて型があることの恩恵は大きく、近頃AltJSの代表格として人気を集めています。TypeScriptはもともと型のないJavaScriptで書かれるコードに型を付けることを使命としていることもあり、たまに変な型が追加されます。例えばTypeScript2.8で追加されたconditional typesはずいぶん注目を集めました。これによってTypeScriptの型システムの表現力が広がりましたが、一方でTypeScriptを書いている人の中には、よく分からない型が増えてついて行けない、一部の人たちが長くてよく分からない型定義を書いて喜んでいるだけと思っている方もいるのではないでしょうか。実際、健全にJavaScriptを書いていれば、自分でそのような変な型を書くことはあまり多くありません。 そこで、この記事ではT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月の自分に教えたいリンク集 - Qiita
Bulma: Free, open source, and modern CSS framework based on Flexbox
予約システムSelectType (セレクトタイプ) | 無料ではじめる高機能予約システム
Togetter - 国内最大級のTwitterまとめメディア