- 投稿日:2020-01-25T23:17:52+09:00
【Vue.js】Qiita 週間いいね数ランキング【タグ別】
他のタグ
集計期間
01月18日 ~ 01月25日
いいね数ランキング
1位: サーバ管理なしでWebサービス公開 -Firebase(Authentication, Hosting, Firestore) + GAEで『LogCrow(ログ情報共有サービス)』開発-
GAE
Vue.js
Firebase
個人開発
algolia
42いいね
@ike_daiさん(01月22日 22時37分の投稿)2位: jQuery愛好家のためのVue.js、React入門(いずれAngularも)
jQuery
フォーム
Vue.js
React
16いいね
@BRSFさん(01月24日 02時20分の投稿)3位: 【Vue.js】Vueコンストラクタ関数をWebコンソール上で見つける方法
JavaScript
Chrome
デバッグ
Vue.js
webpack
11いいね
@masciiさん(01月19日 07時08分の投稿)4位: ?【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。 その1
初心者
Vue.js
Firebase
nuxt.js
5いいね
@sychocola1さん(01月20日 10時03分の投稿)5位: Vue.js / Nuxt.js: 「img要素の高さ」に「img要素上のdiv要素の高さ」を合わせる
CSS
Vue.js
nuxt.js
4いいね
@tokizo819さん(01月20日 09時27分の投稿)6位: obniz-nobleでBLEスキャンをグラフ表示してみた
JavaScript
Vue.js
chart.js
ESP32
obniz-noble
4いいね
@porurubaさん(01月19日 07時03分の投稿)7位: 【Django】Django+MySQL+Vue.jsな環境を作るメモ【Python】
Python
Django
MySQL
Vue.js
3いいね
@osakashoさん(01月24日 02時34分の投稿)8位: Vue.js のディレクティブの記述を膨らませないために
JavaScript
Vue.js
3いいね
@hidacheさん(01月23日 14時26分の投稿)9位: 今一度、NuxtJS v2.11.0でTypeScript v3.7.5を適用する方法を探してみた。
TypeScript
Vue.js
nuxt.js
3いいね
@jin-jar-aleさん(01月23日 04時50分の投稿)10位: html2canvasを使ってVue.js のサイトを画像で切り取る
JavaScript
Vue.js
html2canvas
3いいね
@13sayuさん(01月22日 15時52分の投稿)11位: 【Nuxt.js】 middleware is 何?
JavaScript
Vue.js
middleware
Vuex
nuxt.js
3いいね
@ono-taさん(01月21日 10時05分の投稿)12位: Vue.jsのScrollBehaviorがCSSのせいで動かなかった時のこと
CSS
Vue.js
3いいね
@yuudevelopさん(01月20日 08時47分の投稿)13位: Auth0で簡単にユーザー認証を実装(花粉カレンダー作成②)
JavaScript
Node.js
Vue.js
VSCode
Auth0
3いいね
@doikatsuyukiさん(01月20日 03時01分の投稿)14位: Vue.js×FullCallendarでWEBカレンダー作成(花粉カレンダー作成①)
JavaScript
Node.js
Vue.js
FullCalendar
VSCode
3いいね
@doikatsuyukiさん(01月19日 22時43分の投稿)15位: VueコンポーネントのfunctionをES6スタイルで書く
JavaScript
es6
Vue.js
nuxt.js
2いいね
@pisolinoさん(01月23日 17時59分の投稿)16位: Vue.jsかNuxtJSでassetsに入れた画像を動的に表示させる
TypeScript
Vue.js
nuxt.js
2いいね
@jin-jar-aleさん(01月23日 16時28分の投稿)17位: Vue.jsでイベントオブジェクトを取得する
JavaScript
Vue.js
2いいね
@hidacheさん(01月23日 14時08分の投稿)18位: Nuxt.jsのbeforeDestroyed()でイベントリスナーを削除できなかった時の対処法。
JavaScript
Vue.js
nuxt.js
2いいね
@ddg171さん(01月23日 06時19分の投稿)19位: ?【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。 その3
初心者
Vue.js
Firebase
nuxt.js
FirebaseAuth
2いいね
@sychocola1さん(01月22日 10時49分の投稿)20位: 【Firebase】onShapshotを使ったらVuexに怒られた話
Vue.js
Firebase
Vuex
Firestore
2いいね
@ono-taさん(01月22日 06時41分の投稿)21位: 【Nuxt.js】pagination実践編:$router.pushで簡単実装!
JavaScript
Vue.js
コンポーネント
nuxt.js
2いいね
@aLizさん(01月21日 09時28分の投稿)22位: 花粉症LINE BotからのデータをWEBカレンダーに表示する(花粉カレンダー作成④)
JavaScript
Node.js
Vue.js
Firebase
LINEmessagingAPI
2いいね
@doikatsuyukiさん(01月21日 03時08分の投稿)23位: NuxtのasyncDataとdataの使い分け方
JavaScript
Vue.js
nuxt.js
2いいね
@ToshioAkaneyaさん(01月20日 13時03分の投稿)24位: Vue CLIのパッケージマネージャーがnpmからyarnに変わっていて苦労した
Vue.js
vue-cli
2いいね
@terry_6518さん(01月20日 07時05分の投稿)25位: Flask + Vue.js + GitHub Pages で作ったTCGカードの検索アプリ
Flask
github-pages
Vue.js
2いいね
@knakajima3027さん(01月19日 09時12分の投稿)26位: vue create で作成したプロジェクトでコンパイルエラーが発生した場合
Vue.js
vue-cli
2いいね
@azukiazusaさん(01月19日 08時20分の投稿)27位: 【Vue.js】TOAST UI Image Editor を使って画像編集!
JavaScript
canvas
ライブラリ
Vue.js
画像編集
1いいね
@r_pg10さん(01月25日 05時39分の投稿)28位: 【Vue/Nuxt】VeeValidateを導入してバリデーションを実装してみた
バリデーション
Vue.js
nuxt.js
VeeValidate
1いいね
@arthur_foreignさん(01月23日 18時49分の投稿)29位: 【Nuxt.js】TypeScript基礎編:Vue.extendでシンプルなコードを書こう
JavaScript
Vue.js
コンポーネント
nuxt.js
1いいね
@aLizさん(01月23日 08時03分の投稿)30位: Nuxt.js + axiosでスネークケース・キャメルケースを相互変換する
Vue.js
axios
nuxt.js
1いいね
@yumayamada1029さん(01月22日 08時33分の投稿)31位: ?【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。 その2
初心者
Vue.js
Firebase
nuxt.js
Firestore
1いいね
@sychocola1さん(01月22日 05時14分の投稿)32位: Vue.jsでGoogleMapsAPIを使用して地図を表示する(多分)最小構成
GoogleMapsAPI
Vue.js
1いいね
@Sr_Bangsさん(01月22日 05時00分の投稿)33位: Vue.js の基本的な機能を使ったサンプルを書く
JavaScript
Vue.js
1いいね
@niwasawaさん(01月21日 14時12分の投稿)34位: Vue.js(Nuxt.js)で画像を表示させる方法(imgタグ、背景画像)
Vue.js
nuxt.js
1いいね
@To-kaさん(01月21日 02時11分の投稿)35位: 【Vue.js】表示後、3秒経過したら自動的に消えるフラッシュメッセージのサンプルコード
Vue.js
1いいね
@terufumi1122さん(01月20日 21時32分の投稿)36位: 【Vue.js】Vue.Draggableでドラッグ&ドロップ
Vue.js
1いいね
@kyoruniさん(01月20日 15時51分の投稿)37位: Vue.js CSSプロパティを要素に付与する方法
CSS3
Vue.js
1いいね
@KAORI04525472さん(01月20日 11時49分の投稿)38位: Vue DevtoolsがVue.js not detectedと表示される際の対処法
初心者
Vue.js
1いいね
@szktmyk38fさん(01月19日 11時54分の投稿)39位: Vue TypeScript バリデーションチェック
TypeScript
Vue.js
Vuetify
1いいね
@TaitoAjikiさん(01月19日 08時45分の投稿)40位: [Vue.js] VSCode でファイル保存時に自動整形する設定をメモしておく
Vue.js
ESLint
VSCode
自動整形
1いいね
@ksh-fthrさん(01月19日 07時45分の投稿)
- 投稿日:2020-01-25T23:17:52+09:00
【Vue.js】Qiita 週間いいね数ランキング【自動更新】
他のタグ
集計期間
01月20日 ~ 01月27日
いいね数ランキング
1位: jQuery愛好家のためのVue.js、React入門(いずれAngularも)
jQuery
フォーム
Vue.js
React
219いいね
@BRSFさん(01月24日 11時20分の投稿)2位: サーバ管理なしでWebサービス公開 -Firebase(Authentication, Hosting, Firestore) + GAEで『LogCrow(ログ情報共有サービス)』開発-
GAE
Vue.js
Firebase
個人開発
algolia
46いいね
@ike_daiさん(01月23日 07時37分の投稿)3位: 今一度、NuxtJS v2.11.0でTypeScript v3.7.5を適用する方法を探してみた。
TypeScript
Vue.js
nuxt.js
4いいね
@jin-jar-aleさん(01月23日 13時50分の投稿)4位: Vue.jsとDjango-Rest-Frameworkで神経衰弱アプリを作ってみる③
Python
Django
Vue.js
django-rest-framework
Vuetify
3いいね
@Butterthonさん(01月27日 02時00分の投稿)5位: 【Vue.js】Qiita 週間いいね数ランキング【自動更新】
Vue.js
3いいね
@kou_pg_0131さん(01月25日 23時17分の投稿)6位: 【Django】Django+MySQL+Vue.jsな環境を作るメモ【Python】
Python
Django
MySQL
Vue.js
3いいね
@osakashoさん(01月24日 11時34分の投稿)7位: Vue.js のディレクティブの記述を膨らませないために
JavaScript
Vue.js
3いいね
@hidacheさん(01月23日 23時26分の投稿)8位: html2canvasを使ってVue.js のサイトを画像で切り取る
JavaScript
Vue.js
html2canvas
3いいね
@13sayuさん(01月23日 00時52分の投稿)9位: 【Nuxt.js】 middleware is 何?
JavaScript
Vue.js
middleware
Vuex
nuxt.js
3いいね
@ono-taさん(01月21日 19時05分の投稿)10位: 【Nuxt.js】pagination実践編:$router.pushで簡単実装!
JavaScript
Vue.js
コンポーネント
nuxt.js
3いいね
@aLizさん(01月21日 18時28分の投稿)11位: 【Vue/Nuxt】VeeValidateを導入してバリデーションを実装してみた
バリデーション
Vue.js
nuxt.js
VeeValidate
2いいね
@arthur_foreignさん(01月24日 03時49分の投稿)12位: VueコンポーネントのfunctionをES6スタイルで書く
JavaScript
es6
Vue.js
nuxt.js
2いいね
@pisolinoさん(01月24日 02時59分の投稿)13位: Vue.jsかNuxtJSでassetsに入れた画像を動的に表示させる
TypeScript
Vue.js
nuxt.js
2いいね
@jin-jar-aleさん(01月24日 01時28分の投稿)14位: Vue.jsでイベントオブジェクトを取得する
JavaScript
Vue.js
2いいね
@hidacheさん(01月23日 23時08分の投稿)15位: 【Nuxt.js】TypeScript基礎編:Vue.extendでシンプルなコードを書こう
JavaScript
Vue.js
コンポーネント
nuxt.js
2いいね
@aLizさん(01月23日 17時03分の投稿)16位: Nuxt.jsのbeforeDestroyed()でイベントリスナーを削除できなかった時の対処法。
JavaScript
Vue.js
nuxt.js
2いいね
@ddg171さん(01月23日 15時19分の投稿)17位: ?【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。 その3
初心者
Vue.js
Firebase
nuxt.js
FirebaseAuth
2いいね
@sychocola1さん(01月22日 19時49分の投稿)18位: 【Firebase】onShapshotを使ったらVuexに怒られた話
Vue.js
Firebase
Vuex
Firestore
2いいね
@ono-taさん(01月22日 15時41分の投稿)19位: 花粉症LINE BotからのデータをWEBカレンダーに表示する(花粉カレンダー作成④)
JavaScript
Node.js
Vue.js
Firebase
LINEmessagingAPI
2いいね
@doikatsuyukiさん(01月21日 12時08分の投稿)20位: Vue.jsとDjango-Rest-Frameworkで神経衰弱アプリを作ってみる①
Python
Django
Vue.js
django-rest-framework
Vuetify
1いいね
@Butterthonさん(01月27日 02時00分の投稿)21位: 簡単なForm作成から学ぶVue(TypeScript)の書き方 その0 環境構築編
Docker
Vue.js
1いいね
@Kept1994さん(01月26日 21時45分の投稿)22位: 【徒然なるままに】2020年最新、WEB技術の勢力図を三国志にしてみた
Ruby
PHP
Scala
Vue.js
React
1いいね
@pepaperon_pさん(01月26日 20時29分の投稿)23位: Vue.jsのイベント修飾子について理解する
JavaScript
Vue.js
1いいね
@hidacheさん(01月25日 17時50分の投稿)24位: 【Vue.js】TOAST UI Image Editor を使って画像編集!
JavaScript
canvas
ライブラリ
Vue.js
画像編集
1いいね
@r_pg10さん(01月25日 14時39分の投稿)25位: Vue.jsのSPAをFlaskのバックエンドで支えて、Herokuで動かす!
Heroku
Flask
Vue.js
vue-cli
Phtyon,3.0,入門
1いいね
@niever66さん(01月23日 23時21分の投稿)26位: Nuxt.js + axiosでスネークケース・キャメルケースを相互変換する
Vue.js
axios
nuxt.js
1いいね
@yumayamada1029さん(01月22日 17時33分の投稿)27位: ?【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。 その2
初心者
Vue.js
Firebase
nuxt.js
Firestore
1いいね
@sychocola1さん(01月22日 14時14分の投稿)28位: Vue.jsでGoogleMapsAPIを使用して地図を表示する(多分)最小構成
GoogleMapsAPI
Vue.js
1いいね
@Sr_Bangsさん(01月22日 14時00分の投稿)29位: Vue.js の基本的な機能を使ったサンプルを書く
JavaScript
Vue.js
1いいね
@niwasawaさん(01月21日 23時12分の投稿)30位: Vue.js(Nuxt.js)で画像を表示させる方法(imgタグ、背景画像)
- 投稿日:2020-01-25T20:47:51+09:00
初心者によるプログラミング学習ログ 220日目
100日チャレンジの220日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
220日目は
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 24, 2020
220日目
・Vue.jsでアプリ作成講座#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
- 投稿日:2020-01-25T20:42:39+09:00
SPA入門色々(Vue.js/Blazor/React)
概要
SPA(Single Page Application)という技術があることを知り、フロントエンドフレームワークを触ってみるいい機会になるのでないかと思い、Vue.js/Blazor/Reactをまとめて触ってみた。
SPAのルータのページ切り替えを見て従来のiframeや生のJavaScriptとできることがどのように違うのかということも疑問に思ったので同じようなこちらでも同じような感じで実装を試みた。作ったSPAの仕様
- 上部にメニューバー
- Home/Counter/Todoの独立したWebアプリをコンポーネントとして所持。
- Home
- 別のコンポーネントを読み込んで文字を表示するだけなアプリ。
- Counter
- Blazorの実行サンプルに付いてきたカウンターアプリ。
- Todo
- Vue.jsミニハンズオン(TODOリスト作成)を8割位実装したTodoアプリ。
成果物
Vue.js | Blazor | React | iframe | Vanilla-JS
ソースとか(GitHub)感じたメリット・デメリット
SPA全体
メリット
- 本来サーバーサイドで受け持っていたような大幅なhtmlの書き換えが簡単にできる。
- htmlを分割して部品化できる。
- 単一htmlとしてシームレスにページ切り替えられる。
デメリット
- フレームワークありきな存在であること。
- 読み込み時に時間がかかりがち。
- サーバーありきな存在なので気軽に公開しにくい。
Vue.js
メリット
- 本来のhtmlに近い書き方でhtmlを複数ファイルに分割できる(.vue)。
- 変数をフォームとバインド(同期)できる。
- v-for\v-ifでタグをループできる。
- CSSをコンポーネントに閉じ込めることができる。
- vue-cliがあれこれ揃えてくれるのでセットアップが簡単。
- 地味にラップされてるWebStorage。
デメリット
- ルーターの設定が少し煩雑。
- exportするオブジェクトの構成が少し煩雑。
Blazor
メリット
- C#だけでほぼ完結して処理を書くことができる。
- 本来のhtmlに近い書き方でhtmlを複数ファイルに分割できる(.razor)。
- 変数をフォームとバインド(同期)できる。
- @for\@ifでタグをループできる。
- ルーターの設定が容易。
- イベントハンドラの呼び出しが素直。
- 他のコンポーネントを呼びだすためのimportが不要。
デメリット
- まだリリース前。
- ページを開いた時の読み込みが遅い。
- @がゲシュタルト崩壊する。
- DOM由来のAPIを扱うのが面倒。
- 変数バインドと@onchangeを同時に使うことができない。
- CSSに対するサポートがない。
- ライフサイクルが少し心もとない?
React
メリット
- あくまでもJavaScriptが主体となっている。
デメリット
- htmlじゃないhtml。
- htmlとして書くとJSXの形式が直感的じゃない。
- フォームと変数のバインドに癖がある。
- stateの更新が手間。
- 必要なプラグインは基本的物でも各自そろえる必要がある。
- CSSの扱いに癖がある(スコープ化するのも手間っぽい)。
- 専用のループ構文は存在しない。
iframe
メリット
- フレームワークが不要(htmlとJavaScriptの知識だけで良い)。
- いにしえの枯れた技術。
- 適当なホームページスペースに上げても動く。
デメリット
- そもそも、SPAではない。
- htmlが独立しておりそれぞれの連携が面倒。
- URLが項目ごとに変わらない。
- 各フレームのサイズ調整が困難。
- フォームと変数のバインドとかはない。
生JavaScript
メリット
- あるかな?
デメリット
- 生成した要素の状態管理が絶望的。
- 再レンダリングが困難
まとめ
触り始めたばかりの素人の感覚としてはReactよりもVue.jsが触りやすいもののように思えた。
アニメーションを付けたりする段階まで行くとまた印象が変わってくるのかもしれない。
Blazorはwasmというものの可能性を感じるものだと感じた。
また、全体的な構成がVue.jsと似ており、触りやすいような印象を受けた。
ちなみにAngularは触ろうとしたけど面倒くさくなって投げた(情報量少なくないですか…?)
- 投稿日:2020-01-25T18:22:29+09:00
PHP/Laravelで初の新規開発を行ったので利用したライブラリや概念などまとめてみる
概要
独学でちょい勉強して未経験エンジニアとしてスタートで、まだ働き始めて1年経たないですが、初めて新規での開発(バックエンド部分メイン)を担当したのでその感想として、利用したライブラリや概念などを紹介したいと思います。
1ヶ月ちょっととかで大体終わらせる感じだったのであまりライブラリ選定であったり設計にかける時間も
取れない中だったのですが、少しでも参考になればと思います。Formatなど記述や構造で注意したとこ
ディレクトリ構造
並列でポンポンフォルダ置くことは避けました。
特に名前が2単語3単語のファイルが出てくるときには、ディレクトリでカテゴリ作って
綺麗にできるように工夫しています。特にモデルをlaravel内でのファイル名からの
テーブル名識別に頼らずに積極的にリレーション系列はまとめて下層において分かりやすくしました。
例えばusersテーブルに対する、user_prefilesテーブルだったらModels----User.php | |-User----Profile.php作っているときに「これじゃやっぱわかりづれぇわ」なんてことは山ほどあったのでその度に何回も何回も
ディレクトリ構造変更していました?Routing
Route::get('/')->name('home')->uses('HomeController');ルーティングのフォーマットもnameをつけて全て指定したかったので、
nameがパッと見わかりやすいようなフォーマットで統一。多分、見やすい...タブンネ......?
Relation定義
public function keywords() { return $this->hasMany(Keyword::class); }よくStringとしてシングルクオーテーション使って定義しているの見ますけど、
PHPStorm使っている身としてはリレーション定義見たらジャンプして秒速でクラスの確認まで飛べたら嬉しい?
ってことで直接クラスを書いてのリレーション定義しています、この書き方できると知った時は感動しました?Transformer
モデルめちゃくちゃ使うPHP開発においては
覚えて損はない最強の概念だと思っています、
これを定義したおかげで秒速でコーティングが終わった部分も多く存在します?
私が執筆した記事があるのでよかったらそちらを参照してください。私の行った開発においてはリスト表示で使いたい配列を返すTransformerと、
詳細表示で使いたい配列を返すTransformerをそれぞれ二つ用意したりしました。
あとUser登録とUser情報編集など複数ページで似たようなデータ扱う兼ね合いもあり、
Request用にもTransformer作ったりしてます。https://qiita.com/fumifumitaro/items/21bde4e60a908915dde8
scopeクエリ
whereで検索する際nullが混入してしまうと、
うまく検索できなくなるためよくissetでwhereに通さない処理を加えるのをよくみます、
ただあまりにメソッドが冗長になって気持ち悪いのでscopeでカスタムしたwhereを作成しました。public function scopeCustomWhere($query, string $column, string $param = null) { if (is_null($param) || $param == '') return; return $query->where($column, $param); }チェーンして繋げることもできるので楽です、traitとしていろんなモデルに入れて、
customWhereとして利用しました。
なんかnull弾いてwhereするメソッドってありそうですけど私が見つけてないんですかね?
にしてもいつまでもいい命名が出来ずに仮置きしたクソネームメソッドのままリリースしてしまった使用したライブラリ
マークダウン - SimpleMDE
マークダウンエディタを組み込むときに選んだのがこちらです。
導入がとても簡単ですが、奥が深く内部コードをしっかりと読み込んでカスタマイズしなければ
やや手に余ります。画像の追加機能などをカスタムしました。
ホントはvue.jsに色々あるので先にそちらを導入してみたのですが、
こちらのsimplemdeの場合は普通のhtml上のtextareaを拡張してそのまま利用できるため、
submitしたときtextareaに指定したname属性でsubmitされたり、
取り回しが楽そうなのでこちらに変更しました。フォーマッター - Cleave.js
郵便番号や電話番号にハイフンを強制したかったために導入しました。
(入力データの検索かけるときにハイフンなしとありが混在すると面倒、inputのtype="number"などで
数字入力を強制するのもありだと思ったけど個人的にはハイフンありの方がみやすいし入力ユーザー的には
ハイフンが強制された方がいいのかなと。。。)
導入も簡単な上とっても使いやすくて幸せになれました?https://nosir.github.io/cleave.js/
住所の自動入力 - yubinbango
クラス指定での導入だったためJS知らなくても楽にぶち込めちゃいます!
なんかajaxzipとかわかりづらくてもっと簡単なのないかなぁと思ってまして...笑
特によかったポイントが都道府県をプルダウン形式のセレクトでも
自動で入力する機能が備わっていたこと!
下の方にセレクトの場合とか書いています。
https://www.whizz-tech.co.jp/1843/https://github.com/yubinbango/yubinbango
ドラッグ&ドロップ - VueDraggable
ドラッグ&ドロップ機能を実装してから、仕事に対する現実逃避に
適当に作った項目の順番を数時間並べ換えていたのはここだけの話です
わかりやすいけどcssとかテーブルで融通が聞かなくてちょっと困った
多分私の勉強不足でしょうけど、とりあえずテーブルのヘッドだけ別途で作成したりして誤魔化しました。
vue.jsはstyleにSassが書けるのでデザイン変更したい時もやりやすい!
ちなみにこいつ自体には順番を保持する機能がなさげなのでv-forのindexを
inputしたいデータにうまいことバインドさせてDBまで連れてってあげる必要があります。https://www.npmjs.com/package/vue-draggable
ちょっとしたUI変更にて使用 element-ui
デザインが結構好み
ただし、レスポンシブ対応がびみょいので他の選択肢を探した方がいいかもしれない。
私は使いたいcomponentが少しだけだったのでcss軽くいじってflexで誤魔化しました。
使いたかったのがこのtransferと呼ばれる左右にリスト表示させて
選択と非選択をわかりやすく見せるUIを作成したかったために導入、
https://element.eleme.io/#/en-US/component/transferhttps://element.eleme.io/#/en-US
最後に
経験数的にもまだまだ未熟ですしもっと良いライブラリ選定ができたり、
設計技法が使えたろうなぁとは思っています。
他にもライブラリ導入などで開発スピードを上げられた部分や
保守運用を楽にできた場面も数多くあるでしょうし、今後も精進していきます。
- 投稿日:2020-01-25T17:50:44+09:00
Vue.jsのイベント修飾子について理解する
概要
本記事では、Vue.jsで用意されているイベント修飾子について
.stop
と.prevent
を例にしていまとめていきます。.stop
処理内容はJavaScriptにおけるDOMのEventオブジェクトの
event.stopPropagation()
と同じ。
下記の例では、mousemove
によりpタグの上にマウスを乗せるとイベントが発火するようになっています。
そのpタグの中にspanタグを入れていますが、このspanタグの上にマウスを乗せた時だけはイベントを発火させたくないという時に.stop
を使用します。
イベント発火をさせたくないspanタグにv-on:mousemove.stop
を書いてあげることで、"ここでは反応させたくない"の文字の上ではイベントが発火しないようになります。index.html<div id="app"> <p id="sampleText" v-on:mousemove="mousePosition">ここにマウスを載せると下のX、Yの値が変わるよ <span v-on:mousemove.stop>ここでは反応させたくない</span> </p> <p id="result">X:{{x}}, Y:{{y}}</p> </div>index.jsnew Vue({ el: '#app', data: { x: 0, y: 0 }, methods: { mousePosition: function(event) { this.x = event.clientX; this.y = event.clientY; } } }).prevent
処理内容はJavaScriptにおけるDOMのEventオブジェクトの
event.preventDefault()
と同じ。
下記の例では、aタグのリンク先としてGoogleを設定しています。
本来であればクリックした時にGoogleのサイトに遷移しますが、v-on:click.prevent
と記述するとaタグとしてのデフォルトの挙動を妨げることができます。index.html<div id="app"> <a v-on:click.prevent href="https://google.com">リンク</a> </div>index.jsnew Vue({ el: '#app' })最後に
Vue.jsで用意されているイベント修飾子をうまく利用する事で、シンプルなコードを書く事ができるようになります。
他にも利用可能なイベント修飾子はたくさんあるので調べてみてください!
- 投稿日:2020-01-25T14:39:17+09:00
【Vue.js】TOAST UI Image Editor を使って画像編集!
はじめに
切り取りとモノクロ化、輝度調整できることから、TOAST UI Image Editorを使っており、
Qiitaにあまり記事がなかったので、今回利用方法をまとめてみました。TOAST UI Image Editorとは?
Canvasを利用した画像編集ライブラリで、主に以下の機能を提供しています。
- 画像アップロード機能
- 作成した画像のダウンロード
- 画像の切り取り
- 画像の反転、回転
- 図形の挿入、描画
- アイコン(アップロード可)、テキストの挿入
- 背景のマスク機能
- フィルタ機能(モノクロ、セピアなど)
参考情報
- tui-image-editor https://ui.toast.com/tui-image-editor/
- ソースコード https://github.com/ryuckel/vue-playground/tree/tui-image-editor
今回の記事のゴール
最小限の手数でTOAST UI Image Editorのフル機能を使えるようにするところをゴールとします。
作成していく中で必要なパラメータや詰まりやすい部分などは記事中に記載していきます。環境
- Vue.js 2.5.10
- vue-cli 3.7.0
- toast-ui.vue-image-editor
※Vue.js用に用意されたラッパーを使用して作成していきます。実装(準備編)
- 環境構築
vue createコマンドでプロジェクトを作成していきます。
プロジェクト名は任意で入れてください。
セットアップにあたり聞かれる質問も任意で答えていただいて構いません。vue create image-editor-app(プロジェクト名を入れてください) cd image-editor-app
- 必要なライブラリのインストール
TOAST UI Image Editorの他に画像ダウンロード機能を使うため、
file-saverをインストールします。
※tui-image-editorの依存関係パッケージに含まれているのになぜかインストールしないと使えませんでした。。。
Issueで確認してますが、ご存知の方がもしいらっしゃればコメントください。。yarn add @toast-ui/vue-image-editor yarn add file-saver※補足
TOAST UI Image Editorの他にパッケージをインストール(今回はfile-saver)した場合、
yarn serveコマンド実行時などコンパイル実行時に必要なパッケージが足りない旨
コンパイルエラーが発生する場合があります。その際は、エラーの内容に従ってエラーに表示されたパッケージを
yarn add
コマンドで
追加してあげることで解消します。
ライブラリ側の既知の問題とのことです。実装(コンポーネント作成)
TOAST UI Image Editorを使ったコンポーネントを作成していきます。
パラメータが多く、localeは一部だけ記載します。全部見たい方はGithubのソースをご覧ください。要点と注意ポイントは以下の通りです。
- useDefauleUIをtrueにしてPropsで渡すことでデフォルトのUIの適用し、カスタムする部分はoptionsに指定してPropsで値を渡す
- コンポーネントにはライブラリの他に、スタイルを適用させるために、tui-image-editor.cssとアイコンをimportする
- 各要素のスタイルは変数(下記ではtheme)に格納したうえでoptions>includeUIのthemeに指定すると適用される
- ロケールも各要素に文言を指定した変数(下記ではlocale_ja)に格納したうえでoptions>includeUIのlocaleに指定する
imageEditor.vue<template> <tui-image-editor ref="tuiImageEditor" :include-ui="useDefaultUI" :options="options"></tui-image-editor> </template> <script> //ライブラリのインポート import { ImageEditor } from "@toast-ui/vue-image-editor"; // アイコンのインポート import icon_a from "tui-image-editor/dist/svg/icon-a.svg"; import icon_b from "tui-image-editor/dist/svg/icon-b.svg"; import icon_c from "tui-image-editor/dist/svg/icon-c.svg"; import icon_d from "tui-image-editor/dist/svg/icon-d.svg"; // ライブラリ側で用意しているスタイルの読み込み import "tui-image-editor/dist/tui-image-editor.css"; // ダウンロード機能を使う際はインポートする import "file-saver"; //ロケールの設定。自分で日本語に訳して入れていく const locale_ja = { Load: "ファイル選択", Download: "ダウンロード", Apply: "適用", Arrow: "矢印", "Arrow-2": "矢印2", "Arrow-3": "矢印3"... } //表示される各要素のスタイルを指定 var theme = { //共通のスタイル "common.bi.image": "", "common.bisize.width": "0px", "common.bisize.height": "0px", "common.backgroundImage": "none", "common.backgroundColor": "#FFFFFF", "common.border": "0px", // ヘッダー "header.backgroundImage": "none", "header.backgroundColor": "transparent", "header.border": "0px", // ファイルアップロードボタンのスタイル "loadButton.backgroundColor": "#fff", "loadButton.border": "1px solid #ddd", "loadButton.color": "#222", "loadButton.fontFamily": "NotoSans, sans-serif", "loadButton.fontSize": "12px", // ダウンロードボタンのスタイル "downloadButton.backgroundColor": "#fdba3b", "downloadButton.border": "1px solid #fdba3b", "downloadButton.color": "#fff", "downloadButton.fontFamily": "NotoSans, sans-serif", "downloadButton.fontSize": "12px", // メインアイコン "menu.normalIcon.path": icon_d, "menu.activeIcon.path": icon_b, "menu.disabledIcon.path": icon_a, "menu.hoverIcon.path": icon_c, // サブメニューアイコン "submenu.normalIcon.path": icon_d, "submenu.activeIcon.path": icon_c, // submenu primary color "submenu.backgroundColor": "#ffffff", "submenu.partition.color": "#858585", // サブメニュー "submenu.normalLabel.color": "#858585", "submenu.normalLabel.fontWeight": "lighter", "submenu.activeLabel.color": "#000", "submenu.activeLabel.fontWeight": "lighter", // チェックボックス "checkbox.border": "1px solid #ccc", "checkbox.backgroundColor": "#fff", // 切り取り "range.pointer.color": "#000", "range.bar.color": "#666", "range.subbar.color": "#d1d1d1", "range.value.color": "#000", "range.value.fontWeight": "lighter", "range.value.fontSize": "11px", "range.value.border": "1px solid #353535", "range.value.backgroundColor": "#151515", "range.title.color": "#000", "range.title.fontWeight": "lighter", // colorpicker "colorpicker.button.border": "1px solid #1e1e1e", "colorpicker.title.color": "#fff" }; export default { name: "ImageEditor", components: { "tui-image-editor": ImageEditor }, props: {}, data() { return { useDefaultUI: true, options: { cssMaxWidth: document.documentElement.clientWidth, cssMaxHeight: document.documentElement.clientHeight![画面収録 2020-01-25 14.31.08.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125532/bbc45a38-8cf5-25af-f098-1a9cb3ee72ca.gif) , includeUI: { //表示メニューの設定。デフォルトでは全て表示される //menu: ["flip", "crop", "rotate", "filter"], //コンポーネント生成時に選択されるメニューの指定 initMenu: "filter", //メニューバーの位置の指定 menuBarPosition: "buttom" uiSize: { width: "100%", height: "650px" }, theme: theme, locale: locale_ja, } } }; } }; </script>注意点
モバイルのUIも用意されているのですが、レスポンシブ対応ができない?模様です。
できたら追記しようと考えています。最後に
あまり知られていないのか、Qiita含めて記事も少なく、いくつかつまづいてしまったのですが
少しでもお役に立てれば嬉しいです。機能は最低限網羅していますが、↑で紹介した以外にもデザインテーマをライブラリ側で用意していたり、
パラメータもあるのでぜひお試しください!