NuxtのOGP対応について / firebaseとNuxtでwebサービスつくったのでそのNuxtまわり - Qiita
趣味制作で、これ最高なんすよ〜といったランキングを作れるサービス、COUCH(カウチ)をリリースしました。 URLのランキングしか作れない、知り合いに向けたNAVERまとめ的なものをイメージしてもらえたら大体あってます。 人は忘れるし変わるので年月で区切ってBEST保存できればなと。 毎月2000reblog、100likeしてる身として、去年のおすすめreblogすぐ出せない&忘れてる状態となるのが悔しくて作ったというのが本音 使ってもらえたら嬉しいです。基本1人で作ってるので、足りない至らない部分あります。暖かく見守ってもらえれたら助かります。 COUCH(カウチ)は、Nuxtとfirebase（Authentication, Firestore, Functions, Storage, Hosting）で作ったので、当記事はそのNuxt周りのお話、 具体的にはnpmとOGPについて書
Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
フロントエンド 52124 view Vuetifyチュートリアル。CSSを書かないマテリアルデザイン 最終更新日:2019/03/23 VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。 Vuetifyにはマージンの調整、文字サイズの変更等デザインをする上で便利なクラスや、マテリアル。 マテリアルにまつわるオプションがデフォルトで備わっています。 マテリアルやオプションを使いこなすと、凝ったレイアウトでなければ、CSSを書くことなくデザインをすることが可能です。 今回は、以下のようなよくある会員登録フォームをVuetifyでCSSを使わずに実装していきましょう！ Vuetifyの環境構築はこちらでまとめておいたので、環境がない方はこちらから初めてください。 Vuetifyが便利すぎる【マテリアルデザイン3分入門】 Vuetifyでマテリアルデザインをする流れ
create-nuxt-appで構築したNuxt2のプロジェクトにTypeScriptを入れてvuexを使えるところまで持っていく - Qiita
create-nuxt-appで構築したNuxt2のプロジェクトにTypeScriptを入れてvuexを使えるところまで持っていくTypeScriptVuexNuxt はじめに Nuxt1を軽く触った程度なのと、tsほぼ未経験の状態でこの記事を記載していますので間違っているところはぜひご指摘頂けますと幸いです🙇 前提 nuxt 2.0.0 typescript 3.1.1 やってみる Nuxt2をインストールする 執筆時点ではver2インストールの和訳はされていないのでenページの手順通り行います。 npxを使ったことがなかったので今回はnpxでやってみます。
Nuxt.js(v2.2.0)をAPI Gateway+AWS LambdaにNuxt.jsのgzip機能を有効化してデプロイしてみた - Qiita
Nuxt.js(v2.2.0)をAPI Gateway+AWS LambdaにNuxt.jsのgzip機能を有効化してデプロイしてみたAWSgzipAPIGatewayAWSLambdaNuxt Nuxt.jsをAWS Lambdaで動作させるのに参考にした記事それぞれで、Nuxt.jsのgzip機能を無効化するように実装されていますが、有効化されていたらどうなるのか試してみました。 この辺の記事です。 Nuxt.js on AWS Lambda with Serverless Framework - mya-ake com https://mya-ake.com/posts/nuxtjs-on-aws-lambda/ Nuxt.js はデフォルトで gzip の機能が備わっています。 ありがたい機能ではあるのですが、このままだとブラウザで表示できなくなってしまいます。（Chrome では
Vue.js+Firebaseで映画マッチングアプリ(CinemaWith)をリリースしました - Qiita
概要 入社して７ヶ月をすぎました。 流行りのVue.js,Firebaseを使って上映中の映画を利用したマッチングアプリ「CinemaWith」のβ版をリリースしたのでその過程を残します。 https://cinemawith.app 特徴 上映中の映画をお気に入りに登録することで、 その映画を観に行きたい人を探すことができる。 登録からチャットまでが早いため色々な人と関わることができます。 動機 Sierとして客先で働いているため、やってみたいと思った技術に触れられる機会が少ない。 サーバー構築などはベテランの方がやるので新卒の自分が触れることのできる範囲が限られている。 そんな中で一から十まで自分で作ってみたい、あわよくば儲けたい という魂胆のもと開始しました。 制作期間は一ヶ月半ほどでほぼ毎日業後に開発を行っていました。 トップページ 流れ アイデア出し 最初は同期と二人で開発する予
Firebase authで電話番号(SMS)認証を行う方法 (Web) - Qiita
概要 認証にFirebase authを使っているWebサービスで、アカウントに対して電話番号認証をさせ認証情報をリンクさせる仕組みを導入します。 動機 Webサービスにおいて一人にたくさんのアカウントを作られることを防ぎたいというのは割とよくあるケースだと思います。 このときに使える方法のひとつが電話番号(SMS)認証です。SMSで4桁とか6桁の数字を送ってユーザーに入力させるアレです。 メールアドレスとちがい電話番号は無料でいくらでも作るということはできないので、アカウントの開通に電話番号の確認を要求するようにすることは有効な手段です。 ちなみにFirebase authでは電話番号をログイン情報に使うこともできますが、今回はログインはあくまでGoogleやGithubなどOAuthを使い、電話番号認証は既存のアカウントに紐付ける方法についてです。 リポジトリ 今回作成したデモアプリは
Nuxt.js+Electronを試してみる - Qiita
注意 本記事はElectronなどのバージョンが古いときのもののため新しく記事を書き直しました。 最新版はこちら はじめに electron-templateがあまりメンテされてない感じだったり、ビルド後もローカルでサーバーを立てて実行していたりだったので、一度自分で環境を作ってみようって感じの記事です。 この記事の手順で作ったものをいれたリポジトリ → クローズしました セットアップ Nuxt.jsの環境用意 とりあえずcreate-nuxt-appでNuxt.jsの環境を用意する ? Project name my-project ? Project description My badass Nuxt.js project ? Use a custom server framework none ? Use a custom UI framework none ? Choose re
VueでイケてるTransition! fade, slide編 - Qiita
前提 この記事は極力VueのAPIとCSSだけでTransitionアニメーションを実装するという趣旨の元執筆しています。 またtransitionプロパティとVueある程度知っていると仮定した上で話を進めていきます。 よく知らないという方はこちらを閲覧してから、この記事を閲覧することをオススメします。 注意 この記事はデモにCodePenを使用していますが、transitionに必要なCSSを判別しやすくするため、transition関連のスタイルはCSSの欄に、それ以外のスタイルはHTMLの<style>タグに書いています。 あまり褒められたやり方ではないので、本番環境では真似しないでください まず初めに Vueではv-ifかv-showに真偽値を入れてやることで、要素の表示と非表示を切り替えることができます。 しかし、その要素にCSSでtransitionプロパティを設定してやっても
Vue.js で日本語の PDF を生成する - Qiita
環境 Vue： 2.5.17 日本語を使わない場合のミニマム実装 日本語を使わなくて良いなら、以下のような感じで速攻で作れる。 https://jsfiddle.net/eywraw8t/480739/ <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.39/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.39/vfs_fonts.js"></script> 上記では便宜上、CDN から呼び出しているが、日本語を使わないなら普通に npm でインストールでも大丈夫。 pdfmake の公式サイトで、ブラウザ上からPDFの編集イメージが見られるのでオススメ。 http://pdfmak
Vue.jsで簡単なフォームを作成してみた[備忘録] - Qiita
今回作成したもの 見た目はBootstrapで作りました。 要件 作るのはフロント側のみ。内部の処理は考慮しない。 フォームは名字、名前・電話番号・メールアドレスの4つ 全ての項目を入力すると送信ボタンがアクティブになる 電話番号とメールアドレスは入力内容の形式もチェックする フォームの値はリアルタイムで変更を監視 ソースコード全体 <div class="form-container container" id="app"> <form> <div class="form-group"> <label for="exampleInputEmail1">名前</label> <div class="form-row"> <div class="col"> <input v-model="form.firstName" type="text" class="form-control" pla
![Vue.jsで簡単なフォームを作成してみた[備忘録] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1a1a3e9ae449c2469aadd844cb66708ebd8013c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJUUzJTgxJUE3JUU3JUIwJUExJUU1JThEJTk4JUUzJTgxJUFBJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgzJUEwJUUzJTgyJTkyJUU0JUJEJTlDJUU2JTg4JTkwJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJTVCJUU1JTgyJTk5JUU1JUJGJTk4JUU5JThDJUIyJTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03MDgzMWQ5NGIzY2JmYzIyYTFjYmI2M2VlNmQxMDhmMg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkaWEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTUyN2U4ZGUzMTY3ZWE0N2E4N2M5ZWNjNGEwNDA4MzAy%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ko44Kk44OB44O844Og44Op44Kk44OV44OH44K244Kk44Oz%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dcdc87384eec48fb34012da7f79fde0b1)
Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移 - Qiita
作ったログイン画面（シングルペイン）からメイン画面（ツーペイン）への遷移をつくる回。図にするとよくある以下のような感じ。 今回はあくまで画面遷移の方法の話なので、認証されているかどうかを判定する処理などはたぶんまた今度書く スクリーンショット 以下のコードのそのままではないけど、こんな雰囲気の画面遷移ができた ログイン画面 (Single pane) メイン画面 (two pane) +-------------------------------+ +-------------------------------+ | +-----------+ | | Logo | | Name | | | +-------------------------------+ | +-----------+ | | | | | | | Navigation | Main-pane | | +------
![Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/69123d7df5e1b680f71fd7552a84d044b725d569/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJUUzJTgxJUE3U1BBJTIwLSUyMCU1QjEyJTVEJTIwJUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgyJUE0JUUzJTgzJUIzJUVGJUJDJTlBJUUzJTgyJUI3JUUzJTgzJUIzJUUzJTgyJUIwJUUzJTgzJUFCJUUzJTgzJTlBJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgxJThCJUUzJTgyJTg5JUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJTlBJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgxJUI4JUU3JTk0JUJCJUU5JTlEJUEyJUU5JTgxJUI3JUU3JUE3JUJCJTIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz04ZmMxNzM5ZDAxMzM2MmIyNjg5YTE1MTA3NThkODdjMw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuYXJ1dGFybyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzAwZWFhNjQ0OWEzMjYyNjQyNzRlMTcyZWMyNzZlY2I%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D536298a86e227de2eb253ae8fc0d590e)
[AWS]AWSAmplifyConsoleを使ってVue製アプリをデプロイする - Qiita
はじめに 今年のre:Inventも新サービスやアップデートがてんこ盛りで、さらに追いかけるのが難しくなってきましたね…衛星通信をマネージドで提供するって何？www その中で AWS Amplify Console なるサービスが発表されました。今回はそのサービスを利用してVue製のアプリケーションをデプロイしようと思います。 注意書き この記事ではVueのことはほぼ触れません。 なんでVue製のアプリをデプロイしようとしたのかは、筆者がVue好きだからです。 AWS Amplify Console このサービスは一体何かと言うと、アプリケーションをデプロイするするためのCI/CDパイプラインを一括で設定することができるサービスなのです！ 普段CodeBuildやCodeDeployといったCode兄弟を利用してパイプラインを構築している方が多いと思います。 このAmplifyConsol
![[AWS]AWSAmplifyConsoleを使ってVue製アプリをデプロイする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4dfbf3c66953371bbb94f9441d465581113f79d6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQVdTJTVEQVdTQW1wbGlmeUNvbnNvbGUlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElQTMlRTMlODElQTZWdWUlRTglQTMlQkQlRTMlODIlQTIlRTMlODMlOTclRTMlODMlQUElRTMlODIlOTIlRTMlODMlODclRTMlODMlOTclRTMlODMlQUQlRTMlODIlQTQlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTlkYWNiYzhjMWMxY2MwYjU2NzVhZWMzNjA0YmJmZmQz%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpc19yeW8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTg1Yjc5Y2Q4OTI3OGFkNjc1MDgxMzU5ZmI3ODI3NWUy%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D62c8f06dded540b61dc0cf37534c28b0)
GO + Revelで開発していたものをLaravel + nuxtで置き換える - Qiita
Goでの小さいweb開発について 依頼されて開発をして、3年近く小さめのwebサイトをGo + Revelで運用してきて正直そこまで恩恵を受けれなかったように感じる。ので以下のように構成変更した。 Before 言語: Go v1.9 パッケージ管理: dep フレームワーク: Revel v0.21.0 ORM: GORM ミドルウェア: なし、cacheはrevel cache DB: MYSQL 開発環境: Docker CI/CD: CircleCI こうなるまでにも3年間でいろいろしたんですが、いろいろ問題がありました。 Beforeの問題点 Revelが思ったほど盛り上がらなかった GoでのフルスタックなMVCフレームワークとして前は盛り上がってたけど・・・ Web開発のためのモジュール追加があまりなかったので自前で実装した部分がとても多かった Goの変遷がめんどかった Goを
Flutter StudioでFlutterのUIをつくる - Qiita
Flutterにjsxないの？という話が、githubのIssuesではちょくちょく議論が白熱していますが、いいや、そもそもコード書きたくないんだが？というPaul Mutisyaさんが、Flutter StudioなるUI作成ツールをつくっています。 https://medium.com/@pmutisya/create-flutter-studio-using-dart-501f6577c1ca ちなみに、いまはV2になっています。 https://medium.com/@pmutisya/flutter-studio-version-2-41cce10fcf3d 神です。VSCodeにとりこまれて、公式化したらさらに神だなと思います。 追記： このあまりに内容のない記事に「いいね」くださり、とても恐縮ですので、Flutter Studioについてもっと詳細に書かれた以下の本もおススメ
ひとりでWebサービス開発RTAをして、2日間でサービスをリリースした話 〜ツイッター向け画像ジェネレーターを作った〜 - Qiita
ひとりでWebサービス開発RTAをして、2日間でサービスをリリースした話 〜ツイッター向け画像ジェネレーターを作った〜JavaScriptcanvasWebサービスGithubPages個人開発 こんにちわ。れとるときゃりー(@retoruto_carry)です。 新幹線の移動時間でサービスを作ってリリースみたいな記事がQiitaでバズっていたので、自分も勝手にひとりでWebサービス開発RTAをやってみました。 ※RTAとはリアルタイムアタックの略です。ゲームスタートからクリアまでの時間の短さを競うことを意味します。 ツイッターで実況しつつやりました。 今からくっそ簡単なアプリをつくるRTAやります！！ タグはこれで！#webサービス開発RTA — れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) 2018年11月26日 作ったサービ
ZOZOのグローバルECのフロントエンドアーキテクチャ設計 / Frontend Architecture Design of ZOZO - Speaker Deck
HTML5カンファレンス2018で登壇した内容です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - munierujp/nuxt-vuetify-example: Nuxt.js + Vuetify.js Application Example
nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。 - Qiita
nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool! - Qiita
【Vue.js】初めてspanタグをコンポーネントにした - Qiita