Simple Answer

simpleanser

svgをhtmlでインライン無しで色変更したい

Web

なかなか良い方法がない。色変えたいだけなのに。 いろんなところで同じsvgファイルを使うので、インラインはしたくない。

候補１

filterで色を付ける。 かなり特殊なやり方だが、今のところ下記が一番シンプルかも。

svgをJSなし・インライン読み込みなしで自由に色を変更する方法！ | ブルーシュ

この記事の通り、黒色にフィルターをかけて色を制御するが、黒にかけるフィルターは下記で生成する。

https://codepen.io/sosuke/pen/Pjoqqp

候補２

下記のサイトにあるとおり、

外部から読み込んだSVGアイコンの色をCSSで変更する方法

  <svg>
    <use xlink:href="./xxxx.svg#symbol" />
  </svg>

のような形式して指定する方法。 ただし、これの場合、svgタグのせいで、変な領域を確保してしまう。 単純にxxxx.svgの領域と同じにしたい場合は、上記のsvgタグにもxxxx.svgと同じwidth, hightを指定する必要あり。 そうなると、若干インラインしている感じになりそう。。微妙。

（あと画像の拡大縮小もうまくできなかった。）

どうに回避策はないか。。。。

候補３

mask + 背景色

トリッキーだがこんなのもあるんだな。

外部読み込みSVGに色を付ける

Vue3、Composition APIのライフサイクルデバッグ用

Vue.js

下記ファイル(Log.js)のdebugLifeCycleを、各Vueのsetup関数の中で呼ぶ

import { onBeforeMount, onMounted, onBeforeUpdate , onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

function debugLifeCycle(view) {

    console.log(view + ":  on create")

    onBeforeMount(() => {
      console.log(view + ":  on before mount")
    })

    onMounted(() => {
      console.log(view + ":  on mount")
    })

    onBeforeUpdate(() => {
      console.log(view + ":  on before update")
    })

    onUpdated(() => {
      console.log(view + ":  on update")
    })

    onBeforeUnmount(() => {
      console.log(view + ":  on before unmounted")
    })

    onUnmounted(() => {
      console.log("on unmounted")
    })
}

export default {
    debugLifeCycle
};

AdobeXD

AdobeXD

最初は、動画を見るのがよい

xdtrail.com

入れておくと良い?プラグイン

  • Anima
  • Color Designer
  • Color Scale
  • Component to Vue
  • Confetti
  • Copy CSS from panel
  • Copy CSS to Clipboard
  • Icons 4 Design
  • Mimic
  • Remove Decimal Numbers
  • Rename it
  • SelectMenu
  • Stark
  • Web Export
  • unDraw
  • UI Faces

いろいろ

  • テーマは、白基調の背景に黒文字、黒基調の背景に白文字、の2パターンあるとよい
  • テーマの変換に失敗した時用に、文字の色は、黒、白ではなく、少しズラすべきか？ギリギリ確認できればよい。背景で使っていないもの。
  • ボタンや重要なアイコンボタンは、よく使われている青っぽい色がよい。注目させれるしテーマを変えても消えないから。
  • 白、黒、グレーの背景を使うときは、青だけを少し強めにしておくと、パキッとした色になる。例：F2F2F6

Swaggerの記載

Swagger

バージョン

現在

  • swagger 2.0
  • openapi 3.0(swagger 3.0)

があるが、「openapi 3.0」がよい。「openapi 3.0」から「oneOf」属性がサポートになっており、「いづれかひとつ」を表現できるようになっている。

参照：oneOf, anyOf, allOf, not

example、examplesでcomponents（定義）を参照する方法

components:
  examples:
    XXXX:

に定義する必要あり。（components/schemas等ではなく、components/examplesに定義する）

content:
  application/json:
    schema:
      $ref: '#/components/schemas/MyObject'
    examples:
      objectExample:
        $ref: '#/components/examples/objectExample'
...
components:
  examples:
    objectExample:
      value:
        id: 1
        name: new object
      summary: A sample object

参照：Adding Examples

objectでKeyを固定値ではなく可変にしたい場合はadditionalPropertiesを使用する

下記のようにadditionalPropertiesを使用する。

type: object
additionalProperties:
    type: string

参照：Dictionaries, Hashmaps, Associative Arrays

参照：OpenAPI Specification で Response の object で Key を固定値ではなくて可変にしたい場合（HashMap を返したい場合） - 猫でもわかるWebプログラミングと副業

いろんなサイトリンク

参考：本当に使ってよかったOpenAPI (Swagger) ツール | フューチャー技術ブログ

事例：Build, Collaborate & Integrate APIs | SwaggerHub

参考：CRUDでプロパティが変わるモデルをOpenAPIで書くときの定義分割 | Insight Technology

データ型：OpenAPI Specification 入門 - galife

Visual Studio Codeのプラグイン

VSCode

VSCodeの便利なプラグインを記載する

Vue.jsで使いたいVSCodeのプラグイン

Vetur

  • Vue.jsのコードのハイライトや補完のために必須のプラグイン。
  • 整形もできるようになる。Alt+Shift+fでドキュメント全体を整形する。（選択している箇所だけの整形はできないのかなぁ。。）

その他

Swaggerで使いたいVSCodeのプラグイン

Swagger Viewer

  • swaggerのファイル上で、Shift+Alt+pでプレビューを表示する。

Markdown (マークダウン)で使いたいVSCodeのプラグイン

Markdown Preview Enhanced

  • プレビュー表示 .mdを開いてその中で、Ctrl+k、vの順で押下でプレビュー表示する。
    ⇒もしくは、「表示」タブ->「コマンドパレット」->「Markdown: Markdown Preview Enhanced: Open Preview To The Side」を選択。
    ⇒このプレビューで、plantuml、mermaidの図も表示できる。
    ⇒画像添付の時に画像を配置したパスに「#」が含まれると表示できない。(html変換するため、うまく読み込めなくなるため。)

  • PDF出力
    上述のプレビュー表示画面の中で、右クリック->「Chrome(Puppeteer)」->「PDF」で、PDF出力。

  • 目次
    [TOC]　と記述することで目次が表示される。また保存時に更新されているみたい。これが「Markdown Preview Enhanced」のおかげかは不明。

Markdown All in One

  • 章番号の追加＆更新
    「表示」タブ->「コマンドパレット」->「Markdown All in One: Add/Update section numbers」を選択。
    ⇒「# XXX」や「## XXXX」などに章番号が付加されて、「#1. XXX」や「##1.1 XXXX」などになる。

Draw.ioで使いたいVSCodeのプラグイン

Draw.io Integration

  • .ioのファイルを編集できる。図とか絵とか描きやすい。

Vueのプロジェクト作成

Vue.js

手順　-　CLIで作成する場合

  • CLIでプロジェクト作成。
    「vue create プロジェクト名」で作成する。ここではプロジェクト名をcli_appとしている。
> vue create cli_app
  • その後は任意の選択を行う。
? Please pick a preset: (Use arrow keys)  
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features

「Default (Vue 3)」が最新である。「Manually select features」では、Vue Router等のインストールも追加できる。

  • 【参考】Vue Routerのインストールは、後からでも行える。
> cd cli_app
> npm install vue-router@4

参考：Vue.jsにVue Routerを導入して、タグで画面遷移する方法！ | codelikeなブログ

  • 内臓サーバーでプロジェクトをデモ実行
(cli_appフォルダで行う)
> npm run serve

この後、ブラウザから「localhost:3000」へアクセスすると、初期画面が表示される。

  • 以上。
    尚、サーバーを終了させる場合は、コンソールでCtrl+cを入力して終了させる。

  • ビルド方法
    公開用にビルドする。

(cli_appフォルダで行う)
> npm run build

これで、distフォルダに公開用ファイル類が書き出される。

手順　-　Viteで作成する場合

※CLIで作成するより開発中のビルド等のスピードが早い。ただ、babel, eslint、routerなど自分で入れる必要ありか。

  • Viteでプロジェクト作成。
    「npm init vite-app プロジェクト名」で作成する。ここではプロジェクト名をvite_appとしている。
> npm init vite-app vite_app
> cd vite_app
> npm install
  • 【参考】Vue Routerのインストールは、後から行う。
(vite_appフォルダで行う)
> npm install vue-router@4

参考：Vue.jsにVue Routerを導入して、タグで画面遷移する方法！ | codelikeなブログ

  • 内臓サーバーでプロジェクトをデモ実行
(vite_appフォルダで行う)
> npm run dev

この後、ブラウザから「localhost:3000」へアクセスすると、初期画面が表示される。

  • 以上。
    尚、サーバーを終了させる場合は、コンソールでCtrl+cを入力して終了させる。

  • ビルド方法
    公開用にビルドする。

(vite_appフォルダで行う)
> npm run build

これで、distフォルダに公開用ファイル類が書き出される。