*印が付いているものは初めてさわった技術です。はい、お恥ずかしながらすべて初物です。（普段はJavaとかJavaとかJavaとかさわってます） Vue.jsを使用したSPAで作成しています。当初はRuby on Railsで作り始めたのですが、作るWebサービスを考えるとバックエンドはフルスタックなものはいらない・むしろデータ加工したAPIを返すだけで良いんじゃ？と思い、一気に方針転換してSPAで作るように変更しました。 バックエンドフレームワークも、Flaskに変更しました。 Flaskは一般にマイクロフレームワークと呼ばれていて、1ファイルで成り立つようなくらいなモノで小さく始められます。 が、Flaskの機能自体は少ないわけではなく、ディレクトリ構成なども特に規定があるわけでもなく、自由なので初心者には結構難しいFWなのかなという感じでした。 （RailsやDjangoのように規約に
Vue 2.xのOptions APIからVue 3.0のComposition APIへの移行で知っておくと便利なTips - ZOZO TECH BLOG
こんにちは。ECプラットフォーム部のMA（マーケティングオートメーション）アプリケーションチームで、社内向けのマーケティング運用ツールを開発している長澤（@snagasawa_）です。 先日、日本時間の2020年7月18日にVue 3.0のRelease Candidate(v3.0.0-rc.1)がリリースされ、今後は最終リリースまで主要なAPIのbreaking changeは想定していないとのアナウンスがされました。アナウンスを受け、現在社内ツールで進めているOptions APIからComposition APIへの移行で得られたTipsについて紹介します。 この記事では公開時点でのVue 3.0 betaへのアップグレードの方法と、Vue + TypeScriptでのOptions APIからComposition APIへの移行のTipsについてまとめました。Vue 3.0への
はじめに Vue.jsを普段開発で使っていて、SVGとの相性がすごく良いと感じてます。 Vue.jsのドキュメントでもアニメーションなどの紹介もされていますが、 今回はブラウザで編集可能なGUIの土台として、 使えそうなTipsを書いていきたいと思います。 Vue.jsのプロジェクトを作成していく 今回使っていくのはVueCLI v3.xの環境で開発していきます。 標準でプロジェクト作成のUIなども付いており、非常に開発しやすいです。 SVG内でズーム・パン風の機能を実装してみる 早速ですが、SVG内でズーム・パン風の機能を作って見たいと思います。 下記のような感じになります。 （MacBookProなどのノートPCですと二本指で開いてズームしたり、 二本指でスライドして、移動したりして、操作が実感しやすいと思います。） コードで実際に実装するとこのような形です。 移動の場合は差分値分移動
Vue.jsでシンプルなローディングを表示する「vue-loading」の使い方 | DevelopersIO
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, Vueにも対応しています。 Moveable -GitHub Moveableの特徴 Moveableのデモ Moveableの使い方 Moveableの特徴 Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 Draggable ターゲットをドラッグおよび移動する機能 Resizable ターゲットの幅と高さを増減する機能 Scalable ターゲットのx軸・y軸のスケールを増減する機能 Rotatable ターゲットを回転さ
Vue.js(SPA)でhead要素のtitleとdescriptionはページ別に設定しよう【SEO対策】 - かとのぼのマイコード・マイライフ
Vue.js(SPA)でサイトを作るときは、head要素をページごとにちゃんと設定しないと、グーグルの検索画面になかなか載らないため、対策が必要です。 SPAでサイトを作るとhead要素がページごと変化しない問題 Vue.jsでhead要素titleとdescriptionの変更する方法 規模が小さいサイトなら、各ページmounted SPAでサイトを作るとhead要素がページごと変化しない問題 SPA（シングル・ページ・アプリケーション）は、その名前の通り、一つのHTMLのページで、まるで色々なページに切り替わっているように見せる技術です。ページの遷移も早く、作りやすいです。 しかし、実際はページが切り替わっていないため、別のページに移動しても、何も設定をしないとhead要素は変わらないままです。 これがとても問題で、ページごとにhead要素が変わるように対策をしないとグーグルの検索にな
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【個人開発】Qiitaの人気の記事・ユーザー・書籍を見つけられるWebサービスを作りました - Qiita
ライブラリ不要！Vue.jsとSVGで簡単に動かせるUIを作る - Qiita