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について書
Nuxt.js(v2.2.0)をAPI Gateway+AWS LambdaにNuxt.jsのgzip機能を有効化してデプロイしてみた - Qiita
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 では白い画面、 Firefox では Content-Encoding に問題があると表示されます。） 細かいところまで調べきれていないのですが、恐らく API Gateway にも gzip の機能
Vue.js+Firebaseで映画マッチングアプリ(CinemaWith)をリリースしました - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #概要 入社して７ヶ月をすぎました。 流行りの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を使い、電話番号認証は既存のアカウントに紐付ける方法についてです。 リポジトリ 今回作成したデモアプリは
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/5028402289881654dde784102c9f3ed73415d180/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJUUzJTgxJUE3JUU3JUIwJUExJUU1JThEJTk4JUUzJTgxJUFBJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgzJUEwJUUzJTgyJTkyJUU0JUJEJTlDJUU2JTg4JTkwJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJTVCJUU1JTgyJTk5JUU1JUJGJTk4JUU5JThDJUIyJTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wNzBjNzQxNDQ2Njk0ODM0NDQ2N2Y3MDBiNDUyNjI1OQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkaWEmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYyN2IwODQzMzdjNWFlMTAwM2ExMmQ5OTVmNmUwY2Vm%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ko44Kk44OB44O844Og44Op44Kk44OV44OH44K244Kk44Oz%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D3b0e95cffd528f37fe377b46b2e220ae)
Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移 - Qiita
ログイン画面 (Single pane) メイン画面 (two pane) +-------------------------------+ +-------------------------------+ | +-----------+ | | Logo | | Name | | | +-------------------------------+ | +-----------+ | | | | | | | Navigation | Main-pane | | +-----------+ | >>>> | Pane | | | Pass | | | | | | | +-----------+ | | | | | +--------+ | | | | | | Login | | | | | | +--------+ | | | | +-------------------------
![Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/88e171fbebdaa079a9ed1f7ea504c400ad99b8b4/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VnVlLmpzJUUzJTgxJUE3U1BBJTIwLSUyMCU1QjEyJTVEJTIwJUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgyJUE0JUUzJTgzJUIzJUVGJUJDJTlBJUUzJTgyJUI3JUUzJTgzJUIzJUUzJTgyJUIwJUUzJTgzJUFCJUUzJTgzJTlBJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgxJThCJUUzJTgyJTg5JUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJTlBJUUzJTgyJUE0JUUzJTgzJUIzJUUzJTgxJUI4JUU3JTk0JUJCJUU5JTlEJUEyJUU5JTgxJUI3JUU3JUE3JUJCJTIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0yMDZmYzA2YWM1ZTRiZjBmYTE5Mzg1MzVmMTcyZTRlZg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBuYXJ1dGFybyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZmU0NWFkM2VlNmUyM2ZiZjYyY2Q0ZTM2MTIyNjMzZTQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Da74a71f98f5c80a4fb007baa66bcbeac)
[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/387fa8c5ba741b67b66fbc8046ae0d5b1da4027a/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCQVdTJTVEQVdTQW1wbGlmeUNvbnNvbGUlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElQTMlRTMlODElQTZWdWUlRTglQTMlQkQlRTMlODIlQTIlRTMlODMlOTclRTMlODMlQUElRTMlODIlOTIlRTMlODMlODclRTMlODMlOTclRTMlODMlQUQlRTMlODIlQTQlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWQ2ZDRlNjJkYzkwZjQ5ODdmYjRhOTI1NGYxZWM1NzQw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpc19yeW8mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTM1NWYxZWUwNjAwZDI3NzYyNjc5ZDMzY2Q4ZWJjNzJi%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D8526c7a77e4a53a1195c8d14d23a8b0f)
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
こんにちわ。れとるときゃりー(@retoruto_carry)です。 新幹線の移動時間でサービスを作ってリリースみたいな記事がQiitaでバズっていたので、自分も勝手にひとりでWebサービス開発RTAをやってみました。 ※RTAとはリアルタイムアタックの略です。ゲームスタートからクリアまでの時間の短さを競うことを意味します。 ツイッターで実況しつつやりました。 今からくっそ簡単なアプリをつくるRTAやります！！ タグはこれで！#webサービス開発RTA — れとるときゃりー🧡 サービス開発で生きていきたい DM開放してます (@retoruto_carry) 2018年11月26日 #作ったサービス 「#いいねvsRT」画像メーカー こういう画像を簡単に作れるサービスを作りました!！！ 簡単にいいねとRTでせんそうを生み出す画像を作れるサービスです いいねやRTしてくださると嬉しいです！
ZOZOのグローバルECのフロントエンドアーキテクチャ設計 / Frontend Architecture Design of ZOZO - Speaker Deck
HTML5カンファレンス2018で登壇した内容です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WINDIIテック
GitHub - munierujp/nuxt-vuetify-example: Nuxt.js + Vuetify.js Application Example
create-nuxt-appで構築したNuxt2のプロジェクトにTypeScriptを入れてvuexを使えるところまで持っていく - Qiita
nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。 - Qiita
Nuxt.js+Electronを試してみる - Qiita
nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool! - Qiita
【Vue.js】初めてspanタグをコンポーネントにした - Qiita