【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。
Vue.jsとNuxt.jsを使っていて、どっちのドキュメントを見ればいいんだ？ってなったときのために機能を整理する。 開発に慣れてきたら迷うことはないと思いますが、Vue.jsをさわるのが初めてでNuxt.jsを採用した場合、どっちのドキュメントを見ればよいかわからずに、さまよってしまう事があるかもしれません（自分がそうでした）。そんなときのための、長ったらしいメモです。 この記事を書いている時点では、Vue.jsが2.5、Nuxt.jsが1.2です。 ドキュメントの歩き方 まずはガイドで概要を把握して、細かいことが気になったらAPIをあたります。 Vue.jsでの開発がはじめてであれば、本格的に書き始める前に、スタイルガイドを見ておくと、手戻りが少なくなるかもしれません。 ガイド フレームワークの使い方がわかりやすく書かれています。 はじめにから順に読んでいって、大体こんなことができる
一回使ってみたい無料系の管理画面フレームワークまとめとく - Qiita
管理画面用のUIフレームワークをちょこちょこ見るんですが、一回使ってみたいなと思ってそのまま忘れることが多いのでまとめておきます。 使ったことはないけどかっこいいので使ってみたいというやつをただ貼っていくだけの内容ですが blur-admin 最近見た中で個人的にダントツかっこいいやつ。 ひたすら男心くすぐってくるな〜っていうUI。 bootstrapベースで一通りの機能は揃ってそうなイメージです。 カラーテーマとかはなさそうなので、デモのままのUIになりそう RazorFlow シンプルで使い勝手が良さそうなUIです。 白基調だし、管理画面っぽい感じでちょっとだけ凝ってる風に見せられるかなって気がします。 ひとことで言うと無難な印象 Gentellela 見た目的には前出2つの中間ぐらい？ ただ、デモページのUIがたまに壊れてるとこあるので若干不安、、、 AdminLTE 割りとメジャー
e116d1bf937cf18369e0
PHPの場合、TCPDFで既存のPDFファイルに出力時の日時を入れるっていう方法もあるけど、日付入れるためだけにTCPDFの環境をつくるってのも面倒。 PDFそのものに自動で入力する方法がないものかと検索するもののなかなか見つからない。けっこう需要あると思うんだけどな… そしたら、ADOBE公式のAcrobat JavaScript Scripting Guideにちゃんと載ってるんですね。こういうのを探してたんですよ。引用 自動日付フィールドの作成 フォームでは、追跡調査を行えるように、日付を使用することがよくあります。ここでは、文書 を開いたときに現在の日付が自動的に表示されるテキストフィールドの作成手順を説明します。 文書が開いたときに現在の日付を表示するスクリプトは、文書レベルのスクリプトとして作成し ます。 自動日付フィールドを作成するには： テキストフィールドツールを選択して、
Macに別れを告げて、クラウド中心の開発生活を始めるまで - Qiita
昨年あたりから、Macやめたい病を患っていたのですが、2度の故障を経て、重たい腰を上げました。別にWindows使いたいわけもなく「ローカルが煩わしい」だけなので、Windowsアプリは一切インストールしていません。で、どうやって暮らしてるの? というお話です。 TL;DR このあたり↓を組み合わせていけば、クラウド生活可能: GCP (or AWS) Codeanywhere (or Koding or Cloud9) VPCネットワーク + VPN (IPsec+L2TP) + DNS Figmaほか、Webサービス各種 追記・この記事を書いていたら、AWS Cloud9が発表されました。選択肢が増えて何よりです。 はじめに 本稿は、筆者が「Mac断ち」あるいは「ローカルマシンから解脱(げだつ)」する過程で見えてきた、ベスト(かも)プラクティス集に近いものです。 よく使うテキストエディ
マークダウンメモアプリをBoostnoteに乗り換えた話 - Qiita
ここ二年半くらいメモアプリとしてKobitoを利用していたが Dropboxでうまく同期/バックアップができなくなっていることに最近気づいたのと Qiitaに投稿することも減ったし、Kobitoである必要もないかな…と思ったので 代わりのメモアプリを探してみた。 探した条件 このへんが満たせると嬉しいなーと思いながら探してみた。 マークダウンでメモが書ける メモ一覧が更新日順で並べられる ファイルがDropboxなどで同期できる MacでもWindowsでも利用できる Boostnote https://boostnote.io/ Boostnoteなら上記の条件が全て満たせそうだった。 良かったところ マークダウンで書ける エディタとプレビューが別れてないタイプだが、今となってはこちらの方が使いやすそう。 入力中はマークダウンエディタだけが見えていて、入力終了するとスタイルが反映される。
Google Sheets のデータを JSON 形式で取得する Web API をサクッと作る - Qiita
（データを追加する Web API は Google Sheets にデータを追加する Web API をサクッと作る をご覧ください） Google Sheets のデータをJSON 形式で取得する Web API を、10分くらいでサクッと作ります。 レスポンスタイムが長いので、あくまで試作用としてご利用ください。 シートにある全ての情報を取得する だったら、 [ { "title": "TechCrunch Japan", "feed_url": "http://jp.techcrunch.com/feed/" }, { "title": "Engadget Japanese", "feed_url": "http://japanese.engadget.com/rss.xml" } ] が取得できます。 新しいシートを作る https://docs.google.com/sprea
webpackをなんかかっこよくする - Qiita
Before webpack-dashboard (既にwebpackが使える環境があることが前提です) npm install -D webpack-dashboard (執筆時v0.1.6) webpack.config.js等に下記を追加 // webpack.config.js var DashboardPlugin = require('webpack-dashboard/plugin'); plugins: [ new DashboardPlugin() ], // package.json "scripts": { // 元のコマンドの先頭に `webpack-dashboard --` を追加 // "watch": "webpack -d --watch" // "start": "webpack-dev-server -d --hot --inline" "watch"
【ES6】Three.jsテンプレ - Qiita
REVISION: '78' どうやって書くのがベストプラクティスなのだろうか？ 複数シーンを追加するときとかどうすれば。。 シーンごとにクラスをつくるのか、もう少し細かく分けるべきな気がする。 デモ：http://codepen.io/mo4_9/pen/VjqRQX import './OrbitControls'; export default class Sample { constructor (opts = {}) { this.width = window.innerWidth; this.height = window.innerHeight; this.output = opts.output || document.createElement('div'); this.init(); } init () { { // renderer this.renderer = n
Rollupがちょうどいい感じ - Qiita
昨年の途中からちらほら耳にするものの、まだ「なにそれ美味しいの?」なRollupですが、馴染むと手放せなくなる感じ。どんなものか、使い方から、プラグインのつくりかたまで、概観してみたいと思います。 Rollupって何? 複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。WebPackとかBrowserifyみたいなやつです。依存モジュールの解決や、AltJSのプリコンパイルしたり、など。大きな特徴として、次の点がよく挙げられます。 生成ファイルが小さい ES6(ES2015)ネイティブ ドキュメント類はまだ最低限という感じですが、WebPackかBrowserifyにさわったことがあれば、そんなに迷うことはないかも。ただ、トップページに行っても正直よくわからないので、今のところWikiが一番の情報源です。公式の情報で見るべきとこ
日本語のコードで理解するPromise - Qiita
コンセプト 実際に動かせる，日本語を使ったコードを例示する スガキヤのラーメンはうまい Promiseって何？ ラーメンができたときに鳴るスガキヤの呼び出しベルです． ラーメンのお会計をする 呼び出しベルを受け取る この呼び出しベルは 客に出来上がったラーメンを渡す約束 (Promise) そのものを表す この約束があってはじめて客はその後で (then) ラーメンを受け取るという予定を立てることができる 約束の後に予定を生やすというイメージ この後，ラーメンが準備できしだい，以下のイベントが実行される 店は客に出来上がったラーメンを渡す 客はラーメンを受け取る いろいろなスガキヤと客 上でも書いたとおり Promise は「呼び出しベル」または「客に出来上がったラーメンを渡す約束」 then は「約束した内容であるラーメンが準備できたその後で」 という日本語に読み替えられます．これを踏ま
フォトライブラリにUImageをグループ名を指定して保存 - Qiita
UIImageWriteToSavedPhotosAlbumではフォルダ（グループ？）の中に画像を入れることができません。 しかしアプリによっては任意のフォルダに画像を保存しているものがあります。 あれば便利程度の機能ではありますが、アプリとしての品質があがるので、必要であれば実装したいですね。 今回はそれをやります。 今回はgithubにコードを用意しました https://github.com/Ushio/PhotoLibraryUtility カテゴリとして用意しましたので ALAssetsLibrary+PhotoLibraryUtility.h ALAssetsLibrary+PhotoLibraryUtility.m をプロジェクトに追加すればすぐ使えるはずです。 挙動は、 ・指定した名前のフォルダが存在していなかったら新しく作り、そこに保存 ・存在していたらそこに追加 という
ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを作った際に、オフラインでも動くようにするために、HTML5の新しい技術Service Workerを使った。なお、下の動画でホーム画面からネイティブアプリっぽく起動しているのはWeb App Manifestのおかげである。 Service Worker Service Workerは、通常のページの環境とは別に、バックグラウンドで実行されるJavaScript実行環境で、ページからのネットワークリクエストを横取りしたり、ウェブサイトからのPush通知を受けとって表示するといった、今まではできなかった処理をすることができる。Push通知の方は、去年Facebookが使い始めたので有名になったが、今回はPush通知ではなく、ネットワークリクエストを横取りする機能を使ってオフライン対応をした。 ネットワ
Rails + モダンJS環境(Webpack)で新規アプリ作成 - Qiita
Rails5の正式版でましたね！早速触ろう！でも、フロントはWebpackでブラウザの自動更新といった環境で開発したい！ということでRails5 + フロントはwebpackでビルドするサンプルアプリを作ってみました。 なお、今回のコードは以下においておきましたので、ご参考に。 https://github.com/ufotsuboi/rails-webpack-sample （追記） 続きを書きました。上記のリポジトリは次のコードも含まれていますのでご注意ください。 SassのビルドもWebpackでHot Module Replacementしたい 方針 RailsでモダンなJS環境にするにはいくつか方法があって、下記URLがわかりやすく、参考にさせていただきました。 モダンJavaScript開発環境 on Rails 上記の記事ではざっくり言うと 直接ビルドしたものを public
Streams 仕様読んだ - Qiita
Streams 雑感 WHATWG Streams の仕様を読みました。 雑感です。 第1印象は「常識に囚われてはいけないのですね!」でした。 仕様は ES6 で実装してから書いてるようで、既に動く実装があります。 ES6 Classes を使って書かれており、主要なクラスはReadableStream, ReadableStreamReader, WritableStreamの3つ。 Promise まず特筆すべき事は、 Streams はイベントを一切持たないという点です。 ワオ。 従来の JavaScript はイベント駆動です。DOM も XHR も WebSockets も EventSource もイベントを通知します。しかし、この新しい Streams はaddEventListenerを持っていません。代わりに、Promiseをイベントのように使っています。 これにはちゃん
iOSアプリの継続的デリバリーに便利なfastlaneのご紹介 - Qiita
KrauseFx/fastlane 追記(2015/12/04 14:58) fastlaneを使って継続的デリバリーを実践する - Qiita この記事は大分古いfastlaneで書いたものなので、最新のfastlane(1.43.0)で新しく文章を書きました。 この記事の内容は古いものの、まだ使えるのでどちらもよろしくお願いします。 継続的デリバリーの正しい定義、探したけどコレという感じのが無かったので、このエントリでは「いつでもリリース可能な状態にして、リリース時のコストを下げておくこと」という定義とします。 fastlaneは、リリースコストを下げることを目的として作られたツール群で、実際に使ってみるとめちゃくちゃ簡単にbeta配信まで出来てしまう。 作者のKrauseFx氏が実際に使っていて、すでに大体の機能は揃っている。fastlane内で使う機能のことをActionと言って、
HTML5アプリをiOS／Androidで動かすいくつかの方法 - Qiita
HTML5で作ったアプリを、iOS／Androidで動かす方法をいくつか紹介します。 私自身がゲーム開発で使いたいために調べたものなので、少しゲーム寄りの情報になっています。 なお、HTML5で開発したアプリを対象としているため、独自のAPIをJavaScriptで バインディングした方式のものは除外しています。(Titaniumとか) ＃間違った記載がある場合や、他に良いものがあるよ、という場合はコメントいただけると嬉しいです。 Apache Cordova (PhoneGap) Cordovaは老舗で有名なのであまり書くことがありませんが。。。 CordovaはHTML5のAPIに加え、Cordova APIが追加されており、それによってネイティブの機能を呼び出すことができます。 オープンソースなので拡張がしやすく、Cordovaをベースにしたツールが数多く存在します。 （Monaca
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
ionic2 on Angular2 - Qiita
Angular2 Advent Calendar 12日目 です。 僕は ionic が好きなので、ionic の話をしたいと思います。 ionic は AngularJS ベースの UI フレームワークです。CSS/JavaScript の UI コンポーネント集という点に留まらず、cordova を同梱してハイブリッドアプリを作成することが可能です。また、デバイス上でのデバッグツールや、痒いところに手が届くコマンドラインツール等（例えば地味に面倒くさいアイコン用画像をリサイズとか）のエコシステム全体を包含する環境になっているという点が特徴的で、僕が好きなところでもあります。 弱点は Angular に密結合している点です。UIパーツがディレクティブで定義されているので、「ionic の UIコンポーネントは使いたいけど、Angular 以外のJSフレームワークを使いたい」みたいな使い方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ケバブケース（kebab-case）について調べた - Qiita
