概要 Vue で地図を表示するアプリを作ってみます。 地図ライブラリは leaflet を使います。 前提 node と npm ここからダウンロード vue-cli vue-cliのインストール
最近Vue.jsを勉強しはじめて、 なんとかRuby on Railsで書いた既存アプリのフロント周りをなんとかVue.jsで書き直してみたので自分用メモとして残しておきます。 今回の目標 画像のようにECサイト上でジャンル一覧から任意のジャンルをクリックすると、 RailsのDBから呼び出されたジャンルごとのアーティストが描画されるようにする! 概要 どうやってこれを実装するのか RailsのデータベースをVue.jsで受け取るにはそのまま変数で渡すことはもちろん出来ません。 なので、RailsでAPIを作ってaxiosのgetメソッドでそこを叩いてVue側で受け取ることで繋がります。 まずVue.jsの導入 今回は既存のRailsアプリに後からVueを入れるやり方です。 Gemfileに
ほしい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に最近ハマって
Screenreaders please follow this link This website needs Javascript to function. No attempts have been made to support older webbrowsers like Internet explorer and Edge 15. I recommend: Firefox
この記事は一休.com アドベントカレンダー 2018の2日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でフロントエンドの開発を行っています。 今回は、最近一休.comに導入した、SVGスプライトによるアイコンの作り方・使い方について紹介します。 StorybookのSVGスプライトアイコン一覧 アイコンの一般的な使い方 アイコンは、一般的に、以下のような方式で使用されると思います。 ビットマップ画像(gif, png等) アイコンフォント(Font Awosome等) SVG このうち、ビットマップ画像によるアイコンは拡大・縮小に弱いため、様々な解像度の画面に対応する必要のある現代には不向きです。アイコンフォントはベクター画像なので拡大・縮小に強く、豊富なアイコンがライブラリとして提供されているのが魅力です。SVGもアイコンフォントと同様のベクター画像ですが、フォントには
最終更新日: 2018年3月20日 基本的な例SVG アイコンシステムを作成する方法は多くありますが、 Vue の機能を活かす 1 つの方法は、編集可能なインラインのアイコンをコンポーネントとして作成することです。この方法のいくつかの利点は以下の通りです: 即座に編集することが簡単です アニメーション可能です 標準のプロパティやデフォルトを使用して標準サイズを保つことができ、必要ならば変更することもできます インラインなので、 HTTP リクエストは必要ありません 動的にアクセス可能に作ることができます まず、全てのアイコン用のフォルダを作り、簡単に検索できるように標準化された方法で命名をしましょう。 components/icons/IconBox.vue components/icons/IconCalendar.vue components/icons/IconEnvelope.vu
Vue.jsでsvgを扱うときにはまった出来事です。 みなさんsvg使っていますか? svgはどんな環境でもきれいに表示できますし、色もスタイルでかえられるので便利ですよね。 そのsvgをVue.jsで出力したいときにはいくつか方法があるかと思います。 テンプレートに直接書く imgタグのsrcにsvgファイルを指定する svgファイルをそのまま出力する エンジニアがsvgを書ける場合は1.の方法をとれば良いかと思うのですが、デザイナーがsvgを書いてそのファイルをそのまま読み込まなければならないこともあるかと思います。 そのときは2.か3.の方法になるのですが、2.では基本的に色を変えることができなく、svgのメリットを享受できません。(やる方法もないわけではないらしいですが) ということで3.の「svgファイルをそのまま出力する」方法を共有します。 方針 以下の方針で進めていきます。
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい!!という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
Webpacker has served the Rails community for over five years as a bridge to compiled and bundled JavaScript. This bridge is no longer needed for most people in most situations following the release of Rails 7. We now have three great default answers to JavaScript in 2021+, and thus we will no longer be evolving Webpacker in an official Rails capacity. For applications currently using Webpacker, th
こんにちは、hachi8833です。新シリーズ「Vue.jsの使い方」では、BPS Webチームのakioさん作のVue.jsのサンプルコードを順次掲載いたします。公式サイトのサンプルコードが全体に散らばっていてちょっと探しにくかったので、やりたいこと別の最小限のサンプルが欲しくて作ったとのことです。 Vue.jsのドキュメントをひととおり読んだことがあり、すぐ動かせる最小限のサンプルコードを探している方を対象としています。また、Vue.jsをまだやったことのない方でも、このサンプルコードを動かしてみることでVue.jsでどんなことができるか雰囲気をつかみやすくなると思います。 Vue.jsそのものについて詳しくは、公式サイトの「Vue.js」あたりからご覧ください。 次の記事: 04: 双方向データバインディングを使ってみる 01. 手元で Hello, World してみるには? 10
前記事: 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 アプリケーションを作成しながら、必要な技術について説明しています。 私自身は 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の勉強をしています。 今回は今まで勉強したことを整理する意味合いも兼ねて、チュートリアルのようなものを作成したいと思います。 見ていただいた方の参考になれば嬉しいです。 また、JavaScriptに関しては書き慣れていないので、もしもっと良い書き方などありましたらご意見いただけると幸いです。 なお、テストコードはまだ書けておりません。。。 次回の記事で各コンポーネントのユニットテストを書きたいと思っています。 2017/09/20 追記 試しに書いたテストコードの差分を、記事の最後に追記しました。 作るもの 簡単なTODOアプリです。 (どっかのサービスに似ていると言わないでください。。。) TODOの管理はRailsのAPIで実施します。 前提条件及び環境 Ruby、Rails、Node.jsの環境をご用意くださ
Configuration Webpacker gives you a default set of configuration files for test, development and production environments in config/webpack/*.js. You can configure each individual environment in their respective files or configure them all in the base config/webpack/environment.js file. By default, you don't need to make any changes to config/webpack/*.js files since it's all standard production-re
超高速 Yarn はダウンロードしたパッケージをキャッシュするので、再ダウンロードは不要です。さらにリソースを最大限利用できるように処理を並列化するので、インストール時間はかつてないほど高速です。
VueCLIでのSPAではなくRails内でVueを一部だけ利用するという方法をご紹介します。 VueJSのGetStartedが終了していてRailsのチュートリアルも終了している人が対象です。 概要説明 通常のSPAとどう違うのかという所だけ簡単に触れておきます。 一般的なSPAはgulpやgruntを使ってHTMLを生成してAJAXでサーバーサイドアプリケーションに連携するのが普通です。 デメリットとして下記のようなものがあげられます。 ✗ OAuth認証の場合には処理が複雑 ✗ サーバーサイドレンダリングで利用している共通のデザインなどの使い回しが面倒 ✗ 画像やその他リソースのキャッシュ対策が面倒 Railsの一部としてSPAを組み込む場合には上記のデメリットが解消する事とよりセキュアなアプリ開発が実現できます。 ○ OAuthなどの認証機能はRailsのものを流用できる ○ e
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く