RailsのAPI開発で使える！JWTを理解して認証機能を実装する！ - Qiita
背景 以前、vue.js × Rails APIでのSPA開発に挑戦しました。その際、認証にJWTを使ったのですが、ネットの記事を参考に実装したために仕組みやコードを完全に理解できていませんでした。そのためJWTの認証について改めて記事にしてまとめたいと思いました。railsでvue,reactなどと連携させてSPA開発したい方は参考になるかと思います。 #目次 JWTについて JWTで認証をする流れ 実際のrailsコード解説 vue.jsとの連携 1. JWTについて ###■JWTとはなにか JWTとはJSON Web Tokenの略で、JSON形式で表されたトークンです。著名・暗号化によってセキュアな通信ができます。 ###■JWTの中身 JWTは下記のうようにピリオド区切りで３つの要素に分かれています。 ①のヘッダー要素は、データの型やルールを指定します。 ②のペイロード要素には
Vue.jsを使いつつ、OpenStreetMapを表示する - Qiita
iOS専門で色々やってたはずが、万屋になってきた私です。 おはこんばんちわ。 直近で、Webサイト上で地図を表示して、選択したポイントの緯度経度を取得したいことがあったのですが、G【自主規制】を使うにも金がないので、OpenStreetMapを試しに使ってみることにした次第です。 OpenStreetMapとは OpenStreetMapとは、自由に利用できて、編集機能のある世界地図を作る共同プロジェクトです。 イメージ的には、Wikipediaの地図版がOpenStreetMapです。(以下、OSMと略) プロジェクト自体は、英国で2004年から始まり、日本では2008年から活動が始まっているようです。 現状、日本国内での普及はまだまだではありますが、世界的にみると発症のヨーロッパエリアに限って言えば、商用地図にも負けないほど内容が充実しているらしいです。 日本エリアの地図ですが、Goo
RailsアプリにVue.jsを導入してみた(Vue.jsでRailsのDBを受け取る) - Qiita
最近Vue.jsを勉強しはじめて、 なんとかRuby on Railsで書いた既存アプリのフロント周りをなんとかVue.jsで書き直してみたので自分用メモとして残しておきます。 今回の目標 画像のようにECサイト上でジャンル一覧から任意のジャンルをクリックすると、 RailsのDBから呼び出されたジャンルごとのアーティストが描画されるようにする！ 概要 どうやってこれを実装するのか RailsのデータベースをVue.jsで受け取るにはそのまま変数で渡すことはもちろん出来ません。 なので、RailsでAPIを作ってaxiosのgetメソッドでそこを叩いてVue側で受け取ることで繋がります。 まずVue.jsの導入 今回は既存のRailsアプリに後からVueを入れるやり方です。 Gemfileに
Docker + Rails6 + Vue の開発環境を建てる - Qiita
ほしいTodoアプリがない 自分の欲しいTodo機能をもったアプリが無い。 Todoistや、 Trello、 Microsoft Todoに、 sublimetext3のプラグインであるplaintasksなど、 世の中にはtodoを管理するアプリ・サービスが数あれど、 自分が欲しいtodo機能をもったアプリは存在してない。 ならば仕方ない。 「なければ作ればいいじゃない」だ。 ということで、Todoアプリを作ることにした。 ということで、今回は - Docker - Ruby 2.5.3 - Rails6 - MySQL - Vue の構成で開発することにした。 単にtodoアプリならば、 C# + ザマリンとかもありだし、 kotlinも面白そうだし、 DjangoやFlaskでもよかったのだが、 Railsの開発から離れて期間が経っているからリハビリしたいし、 vueに最近ハマって
Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化｜TechRacho by BPS株式会社
こんにちは、hachi8833です。新シリーズ「Vue.jsの使い方」では、BPS Webチームのakioさん作のVue.jsのサンプルコードを順次掲載いたします。公式サイトのサンプルコードが全体に散らばっていてちょっと探しにくかったので、やりたいこと別の最小限のサンプルが欲しくて作ったとのことです。 Vue.jsのドキュメントをひととおり読んだことがあり、すぐ動かせる最小限のサンプルコードを探している方を対象としています。また、Vue.jsをまだやったことのない方でも、このサンプルコードを動かしてみることでVue.jsでどんなことができるか雰囲気をつかみやすくなると思います。 Vue.jsそのものについて詳しくは、公式サイトの「Vue.js」あたりからご覧ください。 次の記事: 04: 双方向データバインディングを使ってみる 01. 手元で Hello, World してみるには？ 10
Vue.jsサンプルコード（39）画像の配置や背景をスライドバーで簡単に調整する｜TechRacho by BPS株式会社
前記事: 38. 入力をやめるとリダイレクトする 次記事: 40. 簡易漫画ビューアを作る 40. 画像の配置や背景をスライドバーで簡単に調整する Vue.jsバージョン: 2.5.2 画面をリロードすると最初に戻ります。 ポイント inputに割り当てた変数からtransformの書式を作るだけでできます。 const vm = new Vue({ el: "#app", data: {s: 1.0, x: 0, y: 0, a: 0, c: "#ADFF2F", b: 64}, computed: { transform: function() { return `scale(${this.s}) translate(${this.x}px, ${this.y}px) rotate(${this.a}deg)` }, }, }) 前記事: 38. 入力をやめるとリダイレクトする 次記事
Ruby on Rails, Vue.js で始めるモダン WEB アプリケーション入門 - Qiita
はじめに この記事では Ruby on Rails と Vue.js を使って WEB アプリケーションを作成しながら、必要な技術について説明しています。 私自身は Rails を使う機会が多いのですが、Vue.js を勉強する目的で学んだことをまとめたものです。 そのため Rails は既に触ったことがあり、Vue.js を初めて使ってみたいという人に向けて入門となる情報です。 ここで紹介したコードはGitHubに公開しています。 またRuby on Rails, Vue.js によるモダン WEB アプリケーション 実践編 (その1)を執筆しているので、興味がありましたら合わせてご覧ください。 この記事で作成するアプリケーションについて この記事では以下の環境で動作することを確認しました。 Ruby on Rails: 5.2.2 (Rails: 6.0.0 でも確認済) Ruby:
Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた - Qiita
はじめに 業務で使っているわけではないのですが、個人的にコツコツVue.jsの勉強をしています。 今回は今まで勉強したことを整理する意味合いも兼ねて、チュートリアルのようなものを作成したいと思います。 見ていただいた方の参考になれば嬉しいです。 また、JavaScriptに関しては書き慣れていないので、もしもっと良い書き方などありましたらご意見いただけると幸いです。 なお、テストコードはまだ書けておりません。。。 次回の記事で各コンポーネントのユニットテストを書きたいと思っています。 2017/09/20 追記 試しに書いたテストコードの差分を、記事の最後に追記しました。 作るもの 簡単なTODOアプリです。 （どっかのサービスに似ていると言わないでください。。。） TODOの管理はRailsのAPIで実施します。 前提条件及び環境 Ruby、Rails、Node.jsの環境をご用意くださ
Rails 5.2で Webpacker + Vue.jsを使ってSPAを実現 - Qiita
VueCLIでのSPAではなくRails内でVueを一部だけ利用するという方法をご紹介します。 VueJSのGetStartedが終了していてRailsのチュートリアルも終了している人が対象です。 概要説明 通常のSPAとどう違うのかという所だけ簡単に触れておきます。 一般的なSPAはgulpやgruntを使ってHTMLを生成してAJAXでサーバーサイドアプリケーションに連携するのが普通です。 デメリットとして下記のようなものがあげられます。 ✗ OAuth認証の場合には処理が複雑 ✗ サーバーサイドレンダリングで利用している共通のデザインなどの使い回しが面倒 ✗ 画像やその他リソースのキャッシュ対策が面倒 Railsの一部としてSPAを組み込む場合には上記のデメリットが解消する事とよりセキュアなアプリ開発が実現できます。 ○ OAuthなどの認証機能はRailsのものを流用できる ○ e
Vueのテンプレートでassetsのimageを使う（rails + webpacker） - 継続的ブログ
assets/images 下の画像をVueのtemplate内で使いたい。 erb内でなら image_tag で行けるが、digestついてるので単に <img src="assets/images/image.png" />とはできない。 解決法 調べたらいくつか方法はありそうだったが、webpackerのドキュメントを読むと、 config/webpacker.yml の resolved_paths を利用すればいいっぽい。 github.com Note: Please be careful when adding paths here otherwise it will make the compilation slow, consider adding specific paths instead of whole parent directory if you just
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue で地図を表示する無料で最短の道 - Qiita
How to load asset_pack_path images into .vue · Issue #1256 · rails/webpacker