You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
モチベーション ブラウザ上で樹形図を編集したい 要求 Vue.js に組み込みたい ブラウザ上のボタン操作等で樹形図を編集したい 上記操作を反映して図を更新したい 樹形図要素に外部サイトへのリンクを貼りたい ライブラリ探し フローチャート図を作成できるライブラリを探した. flowchart-vue demo ドラッグアンドドロップ可 vue-simple-flowchart demo ドラッグアンドドロップ可 vue-mermaid demo無し VuePress mermaid demo無し mdからの図生成 選定 下2つのベースとなっている「mermaid」について調べてみたところ、どうやら樹形図上にリンクを埋め込む機能があるらしい(参考)ので、こちらを利用することとした。 VuePressは静的ページ向けっぽいのでvue-mermaid を利用することにした。 vue-mermai
Chart.js とは 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどのグラフが簡単に描けるJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、誰でも簡単に編集ができるようになっています。すべてのモダンブラウザで表示可能で、IE7から対応しています。 Chart.js · Chart.js 日本語ドキュメント https://misc.0o0o.org/chartjs-doc-ja/ ここでは、利用する機会が多い以下の6種類のチャートの利用方法とサンプルを記載しています。 折れ線グラフ棒グラフレーダーチャート円グラフドーナツチャート鶏頭図 デモページ https://demo.isystk.com/nuxtjs/chart/ 折れ線グラフ 折れ線グラフは、線上に
どうもこじらです。 Vue.jsからNuxt.jsへのプロジェクトの移行が完了しました。 期間は1週間で終わりましたが、ファイル数も多く、いろいろな問題が発生したので作業時間は40時間ぐらいかかりました…。 今回は、移行する前に分からなかったことや、移行時の具体的な作業内容について書いていきます。 Nuxt.jsってどうやって導入するの? Nuxt.jsってどうやって導入するの? そもそもNuxt.jsって何?プラグイン? Vue.jsしか知らない人はまずここから始まると思います。 しかし、世の中の記事はこれを理解している前提で話を進めやがります。 これではNuxt.jsの実態がなかなか掴めませんよねぇ…。 Nuxt.jsを端的に表現するとしたら、Nuxt.jsはVue.js用のプロジェクトテンプレートって感じです。 Vue.jsのフレームワークみたいな? そのため、「導入する」というより
はじめに 11月25日(日) に「にじさんじ配信スケジュール」と呼ばれるウェブサービスをリリースしました。 正確には初めてリリースしたサービスでは無いのですが、会員登録機能が用意された本格的なサービスを出した事がこれまでなく、実質的には初めてのサービスと呼んでも良いだろうと考えています。 という訳で、Crieit「個人開発サービスに用いられている技術 Advent Calendar 2018」6日目は「初めてのウェブサービスを WordPress + Vue.js で個人開発した話」と題して、開発に WordPress や Vue.js を用いたこと、ウェブサービスを作るまでの話や、リリース直後の話をしたいと思います。 n番煎じなテーマですし、蛇足に感じられる内容も多々あるかと思いますが、適宜必要な箇所をお読み頂ければ幸いです。 この記事の想定読者 これからウェブサービスを個人で作りたい方
地元のグルメ情報を紹介するWebアプリをVue.jsで作り、WordPressで運営しているサイトのサブディレクトリー上に公開しました。また。WebアプリのURLがSNSでシェアされた時に写真が展開されるよう、OGPに対応させています。 この記事ではWordPressを使っているサイトにVue.jsのアプリを同居させ、プリレンダリングを使ってOGPに対応させる方法について紹介します。WordPressは https://example.com で運営され、そこにVueアプリを https://example.com/app-name/ で公開するものとします。 前提とする環境 Vue CLIを使ってアプリを開発しています。 ルート以外でVueアプリを公開する 開発したアプリはルートディレクトリ https://example.com/ で公開されるように作られています。これを、サブディレク
Vue.jsはオープンソースのフレームワークです。 現在「Vue3」と呼ばれる Ver.3がリリースされています。 Vue.jsの最新バージョンですね。 このVue3を WordPressで動かしてみようというのが今回の目的です。 といっても簡単で単純に Vue3のライブラリーをCDNのリンクを貼っているだけです。 今回は、取り敢えずの動作確認ということで最低限の実装で動作確認をしてみました。 内容は単純に setIntervalで現在時間を取得して表示するデジタル時計です。 時間の表示には Google Font 「Black Ops One」 を Webフォントで表示しています。 {{ message }} Vue3ライブラリの実装 viu.js 3 と sprintf のライブラリを CDNから読み込みます。 funcions.php に記述します。 参考サイト https://v3
LINEが定期的に開催する技術者向けミートアップ「LINE Developer Meetup」の72回目は、Vue.js Communityと共同で開催。ここではLINEの花谷拓磨氏が「How to development library to Vue 3」というテーマで、Vue 3でパッケージを開発する上でのノウハウを共有しました。 LINEとしてVue.jsのスポンサリングを開始 花谷拓磨氏(以下、花谷):「How to development library to Vue 3」という内容で登壇いたします。よろしくお願いいたします。私はLINE株式会社のFront-end Dev9 Teamに所属している、フロントエンドエンジニアの花谷と申します。Vue.jsのコミュニティとは3年ほど前からつながりがありまして、詳しくはスライドを参照してほしいのですが、それに付随してOSS開発なども行
Increments × cyma (Ateam Inc.) Advent Calendar 2020 の10日目は、株式会社エイチーム EC事業本部の @nagimaruxxx が担当します。 はじめに 私は2020年3月にcymaにフロントエンドエンジニアとして中途入社しました。 入社後はデザイナーと連携を取りながら施策を行ったりシステムの改善業務を行っています。 フロントエンドエンジニアとして入社したものの、訳あって今はほとんどRailsを書いています。そこで気づいたのです。 私「(...フロントエンドの技術が全然アップデート出来ていないな?)」 最近は触り始めて3ヶ月のRailsの勉強ばかりしていて、Vue3への脳内アップデートが出来ていなかったのでこれを機に触ってみました。 同じ仕様を満たすコードでどれくらい違うのか サンプルとして名前一覧を表示し、名前の追加と削除が出来るコード
Vue 3から始める、Vue.js 第1回 Vue 3はどう変わったか 2020年9月にバージョンアップしたVue 3を複数回にわたって取り上げます。第1回目はVue 3の概要を紹介します。 はじめに 本シリーズでは2020年9月にリリースされたVue 3をベースに、Vue.jsの基本的な使い方を解説します。内容としてはVue 3に特化したものではなく、Vue 3以前からある機能も網羅して、はじめてVue.jsに触れる場合でも理解できるように解説していきます。 第1回目はVue 3の概要やVue 2との違いを解説しますので、これからVue.jsに触れる人には若干難しい概念も含まれるかもしれません。これからシリーズを読み進めてもらうと、だんたんクリアになってくると思いますので、今は、あまり気にせず読んでください。 初出記事より改定 本記事は2020年12月に公開されましたが、その後のVueの
スタートアップCTOがVue3とVue2の違い・Vue3の注目機能を分かりやすくまとめ🙌!Vue3の導入を悩んでいるなら必見です👀 こんにちは! わたしたちは数多くのプロジェクトに Vue3 を導入してきましたが、保守性・パフォーマンスともに本当に魅力的なフレームワークだなといつも感じています。特にNuxt3が登場してから、ますます幅広い利用が可能なフレームワークとなりました。 本記事では、今流行りの Vue3 の注目機能& Vue2.x との違いについて、実際の経験談を交え詳しく解説いたします。導入を悩んでいる方は、ぜひ本記事を参考にしてください。 想定する読者 Vue3 の導入を検討しているプロジェクトマネージャーVue3 の導入を検討しているテックリードエンジニアVue3 の新規プロジェクトに参画予定のエンジニア はじめに NuxtJS の Vue3 対応について Nuxt3にて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く