SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だった - Qiita
SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だったOGPSPAVue.jsFirebaseFirebaseCloudFunctions この記事はFirebase Advent Calendar 2018 6日目の記事です。 はじめまして、ゆき(@twitter:yuneco)です。日頃は絵を描いたりちょっとしたWebアプリを個人開発したりして遊んでいます。今日は個人でTwitter連携アプリを開発した際に悩んだSPAの動的な（ページごとの）OGP生成について情報をまとめてみたいと思います。NuxtやSSRは使いません。 作ったもの＆OGPのイメージ 今回作った colorinco*カラーインコ はTwitter連携したユーザの投稿画像やお気に入り画像を表示し、そこから自動的にカラーパレットを生成、Twitterでシェ
ちょっとしたサイトならインクルーシブにSPAで - Qiita
みなさんこんにちは。フロントエンドで頑張ってますか。私はほとんど頑張っていません。なぜって、この界隈、何が何やら分からないです。 ちょっとしたサイトを作りたいだけなのにものすごくめんどくさいことになっています。 トランスパイルが分からない まずもってトランスパイルが分かりません。最新の開発環境は最新仕様のJS書いてBabelで任意のバージョンのJSにする、いわゆるトランスパイルをするのが普通らしいですが、何言ってるのか分からないです。何ですかトランスパイルって。なんでフロントエンドはそんな概念があるんですか。 Babel?Grunt?Gulp?Webpack?何それおいしいの?全然分からないです。 ES6(正式にはES2015らしいですがES6と書きます)以降のJavaScriptを書こうとすると途端にビルドがどうとかトランスパイルがどうとかの話になってしまいます。 なぜこんな状況になって
Nuxt.jsの新規プロジェクトでいい感じのテスト環境をつくる@2018 - Qiita
最新版=>フロントエンドのテストについて考える 現在、新規プロジェクトで、Nuxt.js+TypeScriptを使ったSPAの開発を行っています。この記事では、そういったケースにおいての、Nuxt.jsアプリケーションでのテストに対する考え方と、その方法を紹介します。 TL;DR ユニットテスト/結合テスト=>Jest UIテスト=>Storybookをベースに、Jestで足りない部分を補う プロジェクトの技術スタック Nuxt.js Vue.js Vuex TypeScript Docker テスト種別の整理 簡単に、今回登場するテスト種別の整理をしておきます。より詳しくは、ググったり書籍を読んだりするのをおすすめします。 ユニットテスト - 個別の関数やクラス、コンポーネントをテストする。 結合テスト - 複数の関数やコンポーネントをつなぎこんでテストする。 UIテスト - ブラウザを
HeadLessCMS + GraphQL + Vue.js でSPA（ブログ）を作ってみる
新しめの技術を勉強したいと思い、HeadLessCMS + GraphQL + Vue.js で簡単なSPA(ブログ）を作ってみました。 その過程で学んだことをチュートリアル形式でまとめます。 なるべく初学者の方にもわかりやすいようスクリーンショットを多めに掲載しています。 概要 headlessCMS、GraphQL、Vue.js、Apolloでブログを作成します。 チュートリアルがメインなので、graphQLのクエリの詳細な説明などは省略しています。 以下各バージョンです。 GraphCMS: 2018.7公開のもの Vue cli: 3.0.1 vue: 2.5.17 vue-apollo: 3.0.0-beta.11 vue-router": 3.0.1 vuetify: 1.2.4 graphql: 14.0.2 作成サンプル このようなのトップページ（投稿一覧）と詳細ページの2
Vue-routerを使って、SPAをシンプルにはじめてみる - Qiita
はじめに Vue-routerを使ってシンプルなSPA(Single Page Application)的なサイトを作ってみる。なかなかシンプルにやりたいことだけやれる説明サイトが見つからなかったのでまとめておきます。 やりたいことは、最初に画面がでてきて、画面内のリンクをおしていくとどんどん次のページへ進んでいくという単純な画面遷移をVue-routerを使って実現すること、それだけです。 むかしはこれだけでもできたら、すぐに"アドベンチャーゲーム"作れるなー とか思いましたが、最近アドベンチャーゲームというジャンルもなかなか聞かなくなりましたね..... 説明は、大事なポイント以外は省略してやりたいことに一直線でいきます。 (2018.11) しばらく放置した結果Vueのバージョンが変わり動かないサンプルコードになっていたので修正しました。。 Vue および Vue-router のイ
Rails+Vue.jsでSPA/PWAな家計簿アプリ作った - Qiita
はじめに 嫁と「家計簿つけなきゃねー」という話になり、勉強していたRails+Vue.jsな環境で早速作ってみた。 こんな感じで、SPAっぽく動作する。ついでに、PWA化もしてあるのでスマホでもPCでもよしなに動いてくれる。 ソースコードはこちら AccountsBook やったこと SPAなひな型を作る 基本的には以下の記事を参考にコンポーネントの作成やデータの送信などを行った。 なので、特別困ることもなるスムーズにできた。 Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた デザイン関係に関しては、愛用させていただいているUmiを使用した。 API周りの認証とかまだ作ってないので、後々のことも考えて以下の記事を参考に実装する予定。 【Rails】RailsでAPIの簡単なトークン認証を実装する 日付を選択できるようにする 家計簿なので支出の日付などを入力で
Firebase HostingからFirebase Functions を使ってGKEのアプリケーションにプロキシする - GAミント至上主義
Firebase Hostingを使ったサイトで、一部のパス（/api以下等）へのリクエストを別サーバーに投げられる仕組みを考えた。 別サーバーでCloud Functions（Node.js）で出来ないことをしたかった。 結果として動いてしまったけどなぜこんなことしてるのか分からなくなってきたのでまず整理。 １、アプリケーション概要 フロントエンド Vue.jsでビルドしたSPA（Firebase Hostingで配信） バックエンド GKEで動いているヘッドレスChromeやDjango等を使ったAPIサーバー。Cloud Functionsじゃむりぽ。 ２、動機 上記構成を普通につくるとホスト名やSSL証明を分ける必要があり、下記のデメリットが発生する バックエンドではHTTPS Load Balancerを立てる必要があり、SSL証明書の設定が必要 フロントエンドからAPIにリクエ
GitHub PagesにサクッとSPAをデプロイする - Qiita
GitHub Pagesとは 概要 GitHub Pages GitHubのリポジトリを静的WEBページとして簡単に公開できるサービス。 公開方法 ユーザー毎に作成可能なページ(例: https://[youraccount].github.io) リポジトリ毎のページ(例: https://[youraccount].github.io/[yourRepository]) 本記事では、リポジトリ毎のページとしてデプロイしてみる。 本記事の構成 アジェンダ GitHubリポジトリ作成 簡単なSPA実装 GitHub Pagesへのデプロイ 使用する言語・ツール みんな大好きVue.js vue-router (ルーティング) webpack (モジュールバンドラ) Yarn (インストーラ) GitHubリポジトリ作成 お手持ちのアカウントでリポジトリを作成。 ローカルへクローンする。
[Vue.js×AWS] Vue.js製SPAをAWSにサーバレスなアプリケーションとしてデプロイする - Qiita
はじめに 自社で開発している「IoT.kyoto VIS」 というIoTデバイスのデータを可視化するWebアプリケーションをリニューアルするにあたり、アーキテクチャを思い切ってサーバレスにして、フロントサイドはVue.js(以下Vue)でSPAにしました。 ここでは、SPAをサーバレスアーキテクチャで構築した際の気をつけないといけないところを、私なりにまとめて書いていこうと思います。 IoT.kyotoVISとは？ IoTデバイスのデータをリアルタイムでグラフ化するWebアプリです。 AWSのDynamoDBに蓄積されたデバイスデータをグラフに可視化し、一定の更新間隔でグラフを自動更新することができます。 デバイスのデータが蓄積されているAWSアカウントのDynamoDBRead権限が付与されたCredentialを登録することで、アプリケーションが立っているAWSアカウントから、アカウン
![[Vue.js×AWS] Vue.js製SPAをAWSにサーバレスなアプリケーションとしてデプロイする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/65d982b76538a102dca6b4a4dc1da7f47fa61281/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlLmpzJUMzJTk3QVdTJTVEJTIwVnVlLmpzJUU4JUEzJUJEU1BBJUUzJTgyJTkyQVdTJUUzJTgxJUFCJUUzJTgyJUI1JUUzJTgzJUJDJUUzJTgzJTkwJUUzJTgzJUFDJUUzJTgyJUI5JUUzJTgxJUFBJUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgyJUIxJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJUUzJTgxJUE4JUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgzJTg3JUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUE0JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wYzk4MzQ4ZGI5MDY3MzE5MjFiMmY4ZmRmOGM0ZGI4OA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpc19yeW8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTg1Yjc5Y2Q4OTI3OGFkNjc1MDgxMzU5ZmI3ODI3NWUy%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Def0bba89466ab1089daea3f09b89d22c)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - S-H-GAMELINKS/AccountsBook: Rails+Vue.jsな家計簿アプリ