はじめに マインドマップ関連のツールや技術に関して調べた結果の議事録。 マインドマップツール Mindmeister Miro Whimsical その他 複雑GUIの会 Markdownツール [HackeMD](https://hackmd.io/ まとめ マインドマップを作るための技術は主に以下の3種類 HTML SVG Canvas Canvasは実装に手間がかかるが、表現力が最も高い。 また、画像でのエクスポートが用意。 SVGは十分表現力が高いが、テキストの処理が弱い。 HTMLでもマインドマップを作成可能だが、曲線の表現はSVGなどを頼るしかないので、簡易的なマインドマップしか作れない。...
はじめに Webpack5が 2020/10/10にリリース された。 Webpackは中規模以上のweb軽開発ではデファクトスタンダードなんじゃないだろうか。 自分が関わっているほとんどすべてのフロントエンドではWebpackが使用されている。 慣れるまでは難しいが、学んだ内容を備忘録的にこのページにまとめる。 基本概念 Webpackとは基本的にはJavaScriptアプリケーション用の静的モジュールバンドラーです。 つまり、基準となるJSファイルを指定することで、それに紐づく依存関係モジュールを1つのファイルに結合してくれます。 これを理解するために基本コンセプトは以下です。 概念 意味 entry 依存関係の起点となるファイル。デフォルトで./src/index.js output 出力パスやファイル名。 loaders JSとJSONファイルだけ理解するWebpackに、変換可能なモジュールを追加します。主にtest(対象ファイルの識別)とuse(どのローダーを使用するか)の2つのプロパティを使って設定します。 plugins requireしてpluginsに追加することで、機能を追加できます。 mode developmentやproductionまたは独自の環境の最適化に使用できます。 entry / output [https://webpack.js.org/concepts/entry-points/](Entry Points) https://webpack.js.org/concepts/output/ 最も単純な例は以下のような設定です。 module.exports = { entry: './src/file.js', output: { filename: 'bundle.js', }, }; より複雑な設定では、複数ページのアプリケーション用にマルチエントリの設定や、ouputのファイル名やパス名を動的に変更することも可能です。 Loaders https://webpack.js.org/concepts/loaders/ 例として、以下のようにローダーを追加します。 npm install --save-dev css-loader ts-loader module.exports = { module: { rules: [ { test: /\....
はじめに Ionicとは、ハイブリッドアプリを作成するフレームワークです。 Ionicは元々Angularというフレームワークに依存していましたが、Vue.jsが使えるようになったので、実際に試してみようと思います。 アプリを作る IonicのCLIをインストール yarn global add @ionic/cli@latest global: local内でどこからでも参照できるようにします Ionic CLIの6.17.0がインストールされました。 以下のようなコマンドがあります。 completion ...................... (experimental) Enables tab-completion for Ionic CLI commands. config <subcommand> ............. Manage CLI and project config values (subcommands: get, set, unset) deploy <subcommand> ............. (paid) Appflow Deploy functionality (subcommands: manifest) docs ............................ Open the Ionic documentation website info ............................ Print project, system, and environment information init ............................ (beta) Initialize existing projects with Ionic login ....
はじめに 簡単なUIを持ったアプリをwebページが作成したかったので、expressでサクッと作ります。 nodeはインストール済み前提です。 $ node -v v15.4.0 作り方 express-generatorを使うことで、雛形を爆速で作成できます。 1. ディレクトリ作成 $ mkdir my-site $ cd my-site 2. generatorを追加 $ yarn init $ yarn add -D express-generator $ yarn install 3. 雛形を作成 今回はあえてcurrent directoryに作成します。 $ npx express -v jade -c sass --git -f ./ npxでnpmでインストールしたモジュールを使用できます。 -v: add view support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade) -c: add stylesheet support (less|stylus|compass|sass) (defaults to plain css) --git: add .gitignore -f: force on non-empty directory 作成後は以下のような構成になっており、package....
はじめに **BEM（Block-Element-Modifier：ベム）**の理解が曖昧だったので、整理します。 BEMとは HTMLの要素をBlock、Element、Modifierで分けて命名すること。 Blockはパーツ自体を表す Elementはパーツの部品 Modifierはパーツの状態 Block__Element--Modifier の形式で書く 各名前が複数単語の場合は、-(ハイフン)で繋ぐ BEMのメリデメ BEMの特徴は、明確な要素を指定したCSSできようですが、以下のメリデメがあります。 メリット CSSの他のパーツへの影響を考えなくてよい セレクタを入れ子にしない => 優先度問題を解消 広く使われている デメリット class名が長くなる 全ての要素にclass名を付けるので面倒 Bootstrapと相性が悪い（BootstrapはOOCSSを採用している） 例 logo__company-name この例では、Block__Elementの形式で、Modifier指定していません。 .article-list { width: 100%; &__article-title { font-size: 20px; } } SASSだと、Elementを&で追加する。 .article-list { width: 100%; &__article-title { font-size: 20px; &--red { font-size: 20px; color: red; } } } Modifierも&で追加する。 命名規則がわかっていると、CSSから意図が汲み取れるので読みやすくなります。 参考 class名の命名規則BEMのルールとカスタマイズ ...
はじめに HTMLのviewportの理解が曖昧で、コピペでやり過ごしていました。 viewportは例えば以下のようなものです。 <meta name="viewport" content="width=device-width,initial-scale=1"> この記事では、viewportの意味を解き明かして行きたいと思います。 まずは基本 viewportは表示領域のこと <meta name="viewport" content="width=480"> とすると、幅480pxとして仮想的なモニターができるイメージ document.documentElement.clientWidth も480pxになるように計算される mediaクエリも480pxとして判定される ブラウザはこの仮想的なモニターをブラウザサイズに幅が合うように表示する <meta name="viewport" content="width=device-width"> と指定した場合はブラウザの幅が使用される 解像度は考慮されない 設定できる値の説明 width 表示領域の幅を指定できる。 width=device-widthで実際のデバイスの幅と一致させられる。 initial-scale 初期のズーム倍率。 minimum-scale～maximum-scaleを指定することで、ズーム範囲を指定できる。 minimum-scale: 0～10 の範囲、初期値は 0.25 maximum-scale: 0～10 の範囲、初期値は 1.6 user-scalable ズームの操作を許可するか、しないかを指定する。 注意したいところ モバイル端末で有効。ブラウザへのアドバイスとして使用される 指定しないと「ウィンドウ幅によってページコンテンツが隠されない最小の横幅」か「デフォルト値・980px」 ではどうすべきか 全ブラウザで、統一した表示をしたければwidthを指定する。 <meta name="viewport" content="width=360,initial-scale=1"> デバイスの画面サイズに応じてコンテンツの大きさを変えたい場合は、device-widthを指定する。 <meta name="viewport" content="width=device-width,initial-scale=1"> 参考 もう逃げない。HTMLのviewportをちゃんと理解する HTML：viewport の正しい書き方 ...
はじめに Cookieの設定をする時に、意外と色々パラメータがあります。 何度も調べては忘れるので、ここでわかりやすくまとめて調べるのは最後にしたいと思います。 パラメータの種類 GoogleChromeのDeveloperToolで調べると、以下のパラメータがあります。 Name Value Domain Path Expires/Max-Age Size HttpOnly Secure SameSite Sameparty Priority これらを対象にそれぞれのパラメータの意味と、設定される値について見ていきます。 Name/Value 早速説明を省きます。 Cookie名とCookieの値です。 Expires/Max-Age Cookieの有効期限です。 指定しない場合は、セッション終了までです。 Max-Ageの単位は秒です。 Domain どのホストの場合にCookieを送信するかを指定します。 デフォルトはCookieを保存したページのホストと同じページにアクセスした場合だけCookieを送信します。 例えば、example.com/page.htmlにアクセスした時に保存されたCookieは、同じくexample.com のホストのページにアクセスした場合に送信されます。 この時、サブドメインへアクセスしてもCookieは送信されません。 あえてDomainを指定し場合は、サブドメインを含めてCookieを送信できます。 Domainの設定は以下のように行います。 document.cookie = 'A=B; Domain=example.com'; Path PathはどのパスでCookieを送信するかを許可します。 Secure Httpsの通信でのみ使用できる。 document.cookie = 'A=B; Secure'; HttpOnly JavaScriptで生成されたCookieはこのフラグを含むことができない フラグを含む場合は、JavaScriptで取得もできない document.cookie = 'A=B; HttpOnly'; HttpとかHttpsとかに関連するCookieかと思うような名前ですが、Httpリクエスト経由でしか使用できないという意味のようですね。 SameSite 別サイトに遷移する時に、遷移先サイトのCookieを送信するかどうかを設定できます。 設定可能な値は、以下のStrict、Lax、Noneの3つです。 遷移元をAサイト、遷移先をBサイトとしましょう。 AサイトからBサイトへ遷移する時、BサイトのCookieが送信されるか設定によって以下のようになります。 Strict：BサイトのCookieを送信しない Lax：GETやHEADなど、安全なメソッドの場合だけ送信する None：制限なくBサイトのCookieを送信する Chromeでは、SameSiteが設定されていない場合は、Lax扱いになります。 また、Noneを指定する場合は、同時にSecrue属性が必須です。 つまり、制限なく別サイトにCookieを送信するには、HTTPS通信でないといけないということになります。 参考 Cookieで指定可能な属性の種類と設定方法 ...