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:
CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
200行のVue.jsでスネークゲームを作った - Qiita
こんにちは、猫チーズです。 社内のVue.js勉強用プログラムとして1時間ほどで簡単なスネークゲームを作ったところ、メンバー各々が魔改造などして、一時的に社内でスネークゲームが流行りました。 （2019/09/29 追記） 第2弾も作りました → 『250行のVue.jsで陣取りゲームを作った』 デモページ GitHub ソースコード ゲームルール スネークゲームは、シンプルで古典的なゲームです。 1. 何も操作しないとヘビはまっすぐ進む 2. 壁か自分自身にぶつかるとゲームオーバー 3. 矢印キーでヘビを方向転換できる 4. リンゴを食べると体が伸びる＆スコアUP これらのルールをVue.jsで作りました。 200行のプログラム 以下の200行のhtmlファイルに全ての機能が纏まっています。 snake.htmlなどの名前で保存して、ブラウザでそのファイルを開くと遊べます。 速さや色、新
VueとSVGを使ってシューティングゲーム『ネコ🐱メザシ🐟アタック🌟』を作ったのでソースと解説 - Qiita
→2020年版できました。あわせてご参照くださいませ 絵描きとかUXとかやりつつフロントもやってる「ゆき」です。前回Vue.jsを使ったポートフォリオサイトを作って、VueとSVGだけでぬるぬる動くアニメーションが実現できることがわかりました。 ここまでやったら次はゲームを作りたいと思うのが人の性ですよね。今回は猫の日に合わせて合計20時間くらいで爆速ゲーム開発をやってみました。多分Vueでシューティングゲームを作った変わり者はあんまりいないと思うので、ソースとノウハウを共有します。 作ったもの https://mezashiattack.firebaseapp.com ソース（Githubリポジトリ） タップだけで遊べる簡単なシューティングゲームです。ジャンプしながらメザシを発射し、迫ってくる猫に与える（当てる）とポイントになります 今回作ったゲームの技術的なポイントです アニメーション
Vue.jsエンジニアなら知っておきたいセキュリティー
こんにちは kotamat です。 書いていたらほとんどVue.jsの話じゃなくなっちゃいましたが、SPAの構成において気をつけるセキュリティーに関して紹介したいと思います。 免責もちろんすべての脆弱性を網羅しているわけではないため、ここに紹介しているものをすべてやれば完全にセキュアというわけではありません。 簡易にTIPSを紹介するという目的となります。 DOM Based XSSVue.jsなどDOMを生成するフロントエンドのフレームワークを使うにあたって切っても切り離せない脆弱性の一つがこれでしょう。参考URL JavaScriptによって生成されるHTML DOMによって攻撃者が任意の実行されるJavaScriptコードを注入できるようになる脆弱性であり、攻撃を受けた被害者のブラウザで実行されてしまう事により、機微な情報の漏えい等が発生してしまう可能性のある問題をはらんでいます。
便利なのが登場！Vue.jsでインタラクティブなアニメーションを簡単に実装できる軽量コンポーネント -Kinesis
Vue.jsアプリケーション用のインタラクティブなアニメーションを簡単に実装できるコンポーネントを紹介します。 アニメーションはユーザーの操作をトリガーに動作し、マウスをはじめ、スクロール、ジェスチャー、ジャイロスコープ、オーディオもサポートしています。
Enter/Leave とトランジション一覧 — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
『はじめてのVue.js（双方向バインディング）』
今回で３回目となりますが、Vue.jsの双方向バインディングを試してみましょう。 まずは、動作検証用のサイトを開きます。 分からない場合は、前回の jsfiddle.net を使っている部分を参照して下さい。 ■「双方向バインディング」とは？ 簡単に説明すると、スクリプト側から値の設定とブラウザからの入力のどちらから行っても双方向で値を更新できる仕組みのこと。 ブラウザから入力 <==> 変数 a <==> JavaScriptから更新 変数 a の値を JavaScriptから 'ほげほげ' と変更すると画面にも 'ほげほげ' が表示され、 画面から値を入力すると 変数 a にも 'ほげほげ' が設定されます。 ■何が便利なの？ Vue.jsの双方向バインディングを使用しない場合、 ①画面で入力した内容の変更イベント（onChange）でイベントを受け取り、html上のDOM操作を使って
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
