カテゴリー: デザイン

Stack Overflow 2019 Developer Surveyで最も人気のある開発者環境ツールとしてランクインし（wikipedia参照）、2021年現在テキストエディタ戦国時代を制した感のあるVS CODE。個人的にも以前からMicorosoftのアプリケーションでは久々の当たりだなぁと思っていたのですが、2021年10月20日にwebブラウザ版がリリースされました。

ということで少し触ってみたいと思います。

必要なことはURLを叩くだけ

ブラウザを起動して「https://vscode.dev/」にアクセスするだけでエディタが起動。たったこれだけなので割りとガチめにびっくりしますｗ立ち上がりも一瞬。

そしてサイドメニューの「Open Folder」をクリックするとローカルファイルにアクセスするのがすごい。

Dockerで仮想開発環境を利用してたとしてもローカルにマウントしたファイルを編集するので特に問題なくVS CODE for the Webは活用できるんじゃないでしょうか。

気になる環境設定や拡張機能について

とはいえテキストエディタといえば自分が作業しやすい設定や拡張機能を追加してなんぼというところなので、いくらWeb版があるからといってそこんところどうなの？

・環境設定はローカルストレージなどに保存している模様。一度設定した環境は維持されます
・拡張機能については一部のものだけ利用可能のようです。残念。（日本語化プラグインも未対応）
　PHP系はLINT系（構文チェック）ツールやスニペットなどはほぼほぼ対応中のようです。
　逆にHTML5やJavaScript系は割とある様子。Pythonなんかもちらほらという塩梅。
・「GitHubの機能も統合しているため、リポジトリ、コードスペース、プルリクエストの拡張機能が利用できる。　「github.dev」はWeb用VSCode向けにカスタマイズされたインスタンスで、ログインが自動で行なわれ、.comを.devに変更すればリポジトリを編集できる。とのこと（出典『「Visual Studio Code」がインストール不要に。Webブラウザで動作｜PC Watch』）

vimは使えましたｗ

Setting Syncで同期可能

GithubもしくはMicrosoftアカウントでサインインすればローカルアプリのVS CODEの設定を引き継ぐことができるようです。

詳細はリファレンスで確認することができます。

まとめ

かなり良い線までいってるのですが拡張機能が未対応のものが多いので、Web版をメインに据えるのはまだまだ厳しそうですね。今後の動向に期待したいところ。
VS CODEでは最近、悪意のあるプラグインによるセキュリティが問題になっていたりするので、クラウド上ならセキュリティ対策が最速で対応されそうですし、その辺は価値があるかもしれません。
今のところはサーバーなどを介さずフロントのみで実行できるようなスクリプトを作成するなんかには合っているのでプログラミングのお勉強などで利用するのにはちょうど良さそうです。

Tweet

マニュアルを作成する時どのようなソフトを使用しているでしょうか？
illustratorで作成している方もおられると思うのですが、InDesignで作成するメリットと方法をご紹介したいと思います。

InDesignで作成するメリット

InDesignで作成するメリットとして下記があります。

・ノンブル（ページ番号）が自動で記入される
・タイトルに基づいた目次が自動で記載される
・タイトルなど同じパターンの装飾がある場合はあらかじめ記載される

これらのメリットがあることによって、マニュアルを変更・更新する際の労力がかなり改善されると思います。
InDesignを普段使わない方はイラレと少し使い勝手が異なるので違和感があると思うのですが、一度使い始めるとだんだんなれてくると思いますので一度試してみることをおすすめします。

まずはファイルの新規作成

まずは新規ファイルを作成します。
新規ファイルを作成するときInDesignの場合「レイアウトグリッド」と「マージン・段落」の２つがあります。
特徴は下記のとおりです。

レイアウトグリッド・・・小説やエッセイなど本のようにテキスト主体でレイアウトが決まっている場合に使用します。
マージン・段落・・・パンフレットやカタログなど自由にテキストや写真などを配置したい時に使います。

今回は「マージン・段落」で作成します。
「方向」や「綴じ方」「マージン」などは作成するマニュアルの内容によって決めます。

ページの追加方法

新規作成時にページ数を決めれるのですが、後で追加・削除したい場合はページパネルを右クリックするなどして行います。「ページ」に「８」を入れると８ページ追加されます。

①「ページパネル」を選択します。
②「ページパネル」を右クリックし「ページを挿入」をクリックします。
③追加したいページ数を入力し、OKをクリックします。

ノンブル（ページ番号）の追加方法

まずはページ番号が自動で入るように準備を進めます。

①ページパネルで「A-マスター」をダブルクリックします。
②文字ツールでノンブルを設置したいところに、テキストエリアを作成し「A」と入力します。
③「A」を選択した状態で「書式 > 特殊文字を入力 > マーカー > 現在のページ番号」を選択します。
右側も同様に作成します。
※イラレで言うところの「ポイント文字」はなく「エリア内文字」のみです。

ページに「A-マスター」が適用されているとページがノンブルが記載されます。
※適用されていない場合は、「A-マスター」をページパネルの中のページにドラッグします。もしくはページを選択し、右クリックで「マスターページを適用」をクリックします。

以上でノンブルが自動で割り振られるようになります。

同じパターンのページタイトルの追加方法

同じパターンのページタイトルなどがある場合は、下記のようにします。

①「ページパネル」を右クリックし「新規マスター（B-マスター）」を作成します。
②タイトルを追加します。
③文字の大きさなど設定したら、「段落スタイル」パネルから「新規スタイルを作成」をクリックします。名前を「ページタイトル」など分かりやすい名前に変更します。（後で一括で変更できるようになります。目次作成の際も使用します。）

④「A-マスター」を「B-マスター」にドラッグ&ドロップします。これで「B-マスター」だとノンブルとページタイトルが適用されます。

⑤変更したいページを選択し、右クリック「マスターページを適用」を選択し、「B-マスター」に変更します。

各ページ（B-マスター適用ページ）にタイトルが追加されたと思います。A-マスターも適用されているのでノンブルも追加されています。

タイトルを変更する際は、変更したいページで「shift + command」を押しながらクリックするとタイトルが変更できます。
（そのままクリックしても何も反応がありません）

目次の作成方法

目次もあらかじめ用意しておくと、タイトルに合わせて自動で反映することができます。

①目次ページで長方形ツールで、図形を作成します。
②「レイアウト > 目次」を選択します。

③「目次スタイル」で「段落スタイル」で作成した「ページタイトル」を選択・追加します。
OKをクリックし、①の図形をクリックすると目次が追加されます。

④文字の大きさや色などを調整し、新しく段落スタイル「目次」を追加します。
追加した段落スタイル「目次」をダブルクリックします。
⑤段落スタイルを編集します。「タブ」を選択し、適当な位置（少し右側）にタブを追加し、リーダーに「・」を記入します。
OKをクリックします。

⑥目次とページ番号の間に「・・・」を追加する場合、文字の大きさや色などを調整し、
新しく文字スタイル「目次の点」を追加します。
※「段落スタイル」ではなく「文字スタイル」ということに注意してください。

下記画像のようになったと思います。

次に目次のスタイルを編集します。
「レイアウト > 目次スタイル > 編集」をクリックします。

⑥項目のスタイルを③で作成した「目次」に変更します。
⑦項目と番号間を「^y」に変更し、スタイルを⑥で作成した「目次の点」に変更します。

⑧OKをクリックします。
最後に目次の記載されている図形を選択し、「レイアウト > 目次の更新」をクリックすると変更が反映されているかと思います。

新たにページを追加して目次を変更したい場合は、同様に「レイアウト > 目次の更新」をクリックすると変更が目次に反映されます。

途中から1ページ目にする

表紙を最初に持ってきて、その次から１ページ目にする場合は下記のようにします。

①「ページパネル」のページを開始したい箇所で右クリックし、「ページ番号とセクションの設定」をクリックします。
②「ページ番号割り当て開始」を選択し「1」にしてOKをクリックします。

最後に

マニュアルを作成する際のInDesignの便利な機能をご紹介させていただきました。
慣れないうちは、ややこしいかもしれませんがこれらの方法を使うとマニュアルの更新や変更をする時の手間が大きく改善されると思います。
長くなりましたが最後まで読んでいただきありがとうございました。

Tweet

Twitterで、Realistic Paint Studioというアプリが紹介されているのを見かけたので、有料のアプリでしたが購入してiPadにダウンロードしてみました。

絵の描き方が学べる

これはチュートリアルの一部なのですが、なんとツール自体の使い方のチュートリアルではなく、水彩画の描き方をチュートリアルで教えてくれるのです。

実際の水彩画も、大体このような手順で描いていたと記憶しています。

リアルすぎる…

ツールの見た目がかなりガチ

これはツール選択画面です。

私は文房具や画材の類が大好きなので、これだけでもかなりテンションが上がります…！

アナログ画材っぽい書き心地のソフトなどはこれまでも色々とありましたが、ここまで画材自体のビジュアルが推されているお絵描きツールは初めて見ました。

仕事などで絵を描く時はシンプルで使いやすいUIのアプリの方がいいですが、ゆっくり時間をかけて好きなように描きたい時にはこのUIは筆や絵具を選ぶ楽しさも味わえて良いかもしれません。

時々思い出したように襲い来る「アナログの画材触りたい！！！」の欲求は、このアプリでもだいぶ満たすことができそうです。

水彩画の他に、素描モードと油彩モードがあります。

値段は1,480円と、絵に全く興味のない人が試しに入れてみるアプリとしては少し高いかも…

ですが、画材やアナログ絵画が好きな人や、アナログ画材を試してみたい人はかなり満足できると思います！

（アナログ画材を実際に買うと1,480円では全く済まないので…）

今のところ水彩モードしかまだ触れていないので、ゆっくり他二つのモードも試してみたいと思います！

Tweet

Sass の便利な機能「@mixin」の使い方について紹介します。

基本的な書き方

基本的な書き方は下記のようになります。

@mixin title_abc($color: #333, $fontSize: 22px) {
  color: $color;
  font-size: $fontSize;
}

.title {
  @include title_abc();
}

.title_light {
  @include title_abc(#777, 20px);
}

「@mixin」で名前と変数、スタイルを定義して、「@include」で呼び出します。

そのまま使いたい場合は、「@include title_abc();」のように引数を渡さずに使い、変更したい場合は「@include title_abc(#777, 20px);」のように引数を渡します。

cssに展開したあとは下記のようになります。

.title {
  color: #333;
  font-size: 22px;
}

.title_light {
  color: #777;
  font-size: 20px;
}

メディアクエリを管理

まず、ブレイクポイントを変数で定義します。
変数で定義しておくことで、あとでの変更が簡単にできます。

$sm: "600px";
$md: "900px";
$lg: "1200px";

@mixinを定義します。
「@content」はスタイルセットを@mixinに渡す機能です。
@includeで書いた内容がこの場所に展開されます。

@mixin media-max($size) {
  @media screen and (max-width: $size) {
    @content;//展開される場所。この場合「.class {color:red}」
  }
}

「@include」で定義した、@mixinを呼び出します。
$lgのところは変数ではなく、「1000px」などのように書くと個別での対応もできます。

@include media-max($lg) { 
  .class {color:red}
}

今回は「$lg: “1200px”」なので下記のように展開されました。

@media screen and (max-width: 1200px) {
  .class {
    color: red;
  }
}

擬似要素で三角形を作る

三角形を作りたい時に用意しておくと便利な@mixinです。
ジェネレータを使わずに作成することができるので、用意しておくと便利です。

@mixin triangle($direction, $width, $height, $color){
  content:"";
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  $widthNum: $width / 2;
  $heightNum: $height / 2;
  @if ($direction == top) {
    border-width: 0 $widthNum $height $widthNum;
    border-color: transparent transparent $color transparent;
  } @else if ($direction == left) {
    border-width: $heightNum $width $heightNum 0;
    border-color: transparent $color transparent transparent;
  } @else if ($direction == right) {
    border-width: $heightNum 0 $heightNum $width;
    border-color: transparent transparent transparent $color;
  } @else if ($direction == bottom) {
    border-width: $height $widthNum 0 $widthNum;
    border-color: $color transparent transparent transparent;
  }
}

.arrow::after {
  // top:上向き bottom:下向き right:右向き left:左向き
  @include triangle(right, 6px, 10px, blue);
}

展開されるcssは下記のようになります。

.arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  display: inline-block;
  border-width: 5px 0 5px 6px;
  border-color: transparent transparent transparent blue;
}

remを使用した文字サイズわかりやすくする

フォントサイズをremで指定するときに、1.5remと書くと思うのですが、パッとどれぐらいのサイズかイメージしずらいです。
そのためあらかじめ@mixinを用意しておくとイメージしやすくなります。

@mixin rem($size) {
  font-size: $size + px;
  font-size: ($size / 16) + rem;//既定値を16pxに設定した時
}

h1{
  @include rem(24)
}

p{
  @include rem(16)
}

展開されるcssは下記のようになります。

h1 {
  font-size: 24px;
  font-size: 1.5rem;
}

p {
  font-size: 16px;
  font-size: 1rem;
}

今回はSassの便利な機能「@mixin」の使い方を簡単に紹介しました！
何かの参考になれば幸いです。

Tweet