べこのツボ

これ押すとアイデアが出てくる(理想)

【小ネタ】Google検索で期間を指定する

f:id:damdom:20171116224409p:plain

小ネタです。
検索結果を期間で絞り込みできるの知らなかった……。
技術系の記事で古いものは飛ばしたいときに効果的。

f:id:damdom:20171116222628p:plain:w320

  1. 検索結果ページの「ツール」ボタンをクリック
  2. 「期間指定なし」をクリックすると時期を選択できる

感謝

検索結果の絞り込みについて、Ionic というフレームワークについて調べているときに 榊原さん @rdlabo から教えていただきました。

ありがとうございます…!

Vue.js製のポートフォリオサイトをPugで書き換えました

f:id:damdom:20171105234655p:plain

最近個人的に使い始めた Pug(パグ)、記述量が減って内容を修正しやすくて重宝しています。
Vue.jsでポートフォリオサイト制作記 という技術系同人誌で解説したサイトも Pug に書き換えました。

個人的にまだ慣れない点として、

  • インデントを気にする点
  • 普通のテキスト中に span タグや aタグが混ざるときにどう書くか
  • for 文(まだまだ使える気がしない

のようなことがありますが、終了タグを気にせずに済む点や記述量が減る点がかなり良いです。

動作確認・作業環境

この記事の前提条件

  • vue-cli を使って webpack の環境を用意した状態

事前準備

プロジェクトのディレクトリに移動
※$マークは入力しなくてよいです。ターミナル操作の意味です。

 $ cd www/shirokuma

pug と pug-loader をインストール。pug-loader は webpack で変換するためのパッケージです。

 $ npm i -D pug pug-loader

Brackets に Pug のエクステンションを追加

  1. Brackets を起動して、「ファイル」→「拡張機能マネージャー...」をクリック
  2. pug で検索→追加

修正する

変更するのは vueファイル。 <template> タグを<template lang="pug"> にして、Pug で書きますと宣言。

  • 終了タグ不要
  • タグの<>が不要
  • インデントで入れ子を表現する
  • クラスの指定は.(ドット)idの指定は#(シャープ)
  • 他の属性は( )かっこで括る
  • Vue 独自のタグも同様に書ける様子

Pugの書き方の例

変更前(HTML)

      <header>
        <h1 class="site-title"><router-link to="/">サイトのタイトル</router-link></h1>
      </header>

変更後(Pugの記述)

      header
        h1.site-title
          router-link(to="/") サイトのタイトル

と、このような感じで書いていきます。 ※router-link は vue-router のタグ。 ※webpack で変換されて最終的に変更前の HTML と同じになってしまいますが、今後の更新のしやすさを考えて書き直しました。

後はリポジトリ

shirokuma/App.vue at master · becolomochi/shirokuma · GitHub を参考にしてもらいたいのですが、以下のような感じで書き換えました。インデント1個分は半角スペース2個にしています。

変更前の template タグの中

<template>
  <div id="app">
    <div class="header-outer" id="sticky">
      <header>
        <h1 class="site-title"><router-link to="/">becolomochi's portfolio</router-link></h1>
      </header>
      <hnav></hnav>
    </div>
    <transition name="fade">
      <router-view :data="myData"></router-view>
    </transition>
    <fnav></fnav>
    <div class="sns-box">
      <a href="https://twitter.com/becolomochi" target="_blank" class="sns-link"><i class="fa fa-twitter"></i></a>
      <a href="https://github.com/becolomochi" target="_blank" class="sns-link"><i class="fa fa-github"></i></a>
      <a href="https://becolomochi.tumblr.com" target="_blank" class="sns-link"><i class="fa fa-tumblr"></i></a>
    </div>
    <footer>
      <div class="copyright-box">© 2017 beco</div>
    </footer>
  </div>
</template>

変更後の template タグの中

<template lang="pug">
  #app
    .header-outer#sticky
      header
        h1.site-title
          router-link(to="/") becolomochi's portfolio
      hnav
    transition(name="fade")
      router-view(:data="myData")
    fnav
    .sns-box
      a(href="https://twitter.com/becolomochi" target="_blank").sns-link
        i.fa.fa-twitter
      a(href="https://github.com/becolomochi" target="_blank").sns-link
        i.fa.fa-github
      a(href="https://becolomochi.tumblr.com" target="_blank").sns-link
        i.fa.fa-tumblr
    footer
      .copyright-box © 2017 beco
</template>

最後に

  • 掲載できる作品を増やしたいです……

お知らせ

本はこちらです。

booth.pm

ぼちぼち図解のお仕事を募集しています。
「本作りたいけど図を書くのがなあ〜」という方、ゆる〜い図解でかわいみと親しみを増やしませんか。
絵柄は本当にこんな感じのしか書けません。初心者向けが合うと思います。
料金なども考え始めていますが、現状は知り合いの方優先で。。。年明け以降からやっていきます。

参考

【Git】ステージング後/コミット後のgit diffのこと

f:id:damdom:20171101220304p:plain

2017年11月現在、Git 歴3年弱です。最近になってステージングした後とコミットした後で差分を見るコマンドを知りました。

図を書きました

f:id:damdom:20171101220321p:plain

ステージングする前

$ git diff

ステージングした後(git add)

$ git diff --cached

コミットした後(git commit)

$ git diff HEAD^

本来なら git diff HEAD^..HEAD
..以降は省略可能。今いるコミット(HEAD)とひとつ前のコミット(HEAD^)を比較している。

参考

InDesign の配置のこと(CC2017)

f:id:damdom:20171029133435p:plain

画像や文章データをアートボード上に置くときに使う「配置」機能で困ったことがあったのでメモ。

問題発生

Markdown から Pandoc で icml ファイルを複数個生成して配置する必要がありました。 2つ目の icml ファイルを配置するときに、1つ目の配置で設定しておいた段落スタイルを自動で適用したいのにスタイルが適用されず困ってしまいました。

解決方法

以下のやり方で段落スタイルが適用されました。

  • 「ファイル」メニュー →「配置...」
  • ファイルを選択する
  • ファイル選択ウインドウの左下にある「オプション」ボタンをクリック
    f:id:damdom:20171029131229p:plain:w300
  • 表示されたチェックボックスの中から、「グリッドフォーマットの適用」のチェックを外す【重要】
    f:id:damdom:20171029131241p:plain:w200
  • 「開く」ボタンをクリック

まとめ

  • InDesign CC(2017)はデフォルトでチェックボックスの一覧が隠れていたので、だいぶ探し回ってしまいました。
  • 2018はボタンを押さなくても表示されていました。助かった……毎回開いてチェック外していたような気がする…。Adobeさんありがとう。

動作確認

Markdown × InDesign で本を作ったこと【技術書典3】

f:id:damdom:20171027221802p:plain

この記事は2017年10月22日に行われた技術書典3で頒布した技術系同人誌のエディトリアル(本のデザイン)まわりのことを個人のメモとして公開します。

  • 途中 InDesign が起動しなくなってインストールし直した。焦った……。
  • でも、CC にしてから色々柔軟にできるようになって便利だなーという印象です。
  • 書体もダウンロードできるし。ロゴは Typekit でダウンロードしたものをいじっています。

更新履歴

2017-10-29 01:18 タイトルからハッシュタグ削除 出だしの文章修正

InDesign の設定

ドキュメント設定

B5 の右開き

f:id:damdom:20171027220519p:plain

レイアウトグリッドの設定

メインの書体:ヒラギノ角ゴシック W3。

f:id:damdom:20171027220535p:plain

書体のサイズは組版の単位です。

  • Q(級)とH(歯) 1Q=1H=0.25mm
  • 0.25mm * 14Q = 3.5mm

大学の卒業制作で使ってから慣れてしまったので、本を作るときはこの単位で作っています。単純な整数でミリ以下で大きさを決められるのでイメージしやすくてレイアウトしやすい気がしてる。

Markdown 作成

esa.io でコンテンツごとに記事を書き、大体できたタイミングでシェア URL 作って GitHub に貼り付け。内容の公開をするためでもあったけど、そんなに見られてないと思う。笑
【本】流れ · Issue #4 · becolomochi/shirokuma · GitHub

md 出力

esaのURLの末尾を.html から .mdに変えるとプレーンな Markdown で表示してくれるの本当にスゴイ!!ありがたい!!!!!
こちらのスライドでこの機能を知りました。46ページ以降にあります

MarkdownからInDesignにデータを持ってこれるのか調べていたところ、Pandoc で md ファイルから icml ファイルに変換して配置することができるということがわかりました。

PandocはMarkdown, HTML, LaTeX, reStructuredTextなどを様々な形式(Markdown, reST, HTML, LaTeX, Word, PDFなどなど)に変換出来る強力なツールです。

とのことです!

(引用元: 多様なフォーマットに対応!ドキュメント変換ツールPandocを知ろう - Qiita

ひたすら使っていた変換のコマンド↓

$ pandoc [mdのファイル名].md -s -o [変換したあとのファイル名].icml

とても便利に使わせてもらいました。

InDesign で icml ファイルを配置

icmlファイルを読み込むと段落スタイルが登録されるのでそのスタイルに書体の大きさなどを設定していきました。

  • 太字は W6。
  • コードはCourier
  • コンテンツごとの見出しは W0(細めの書体で大きく使うのが個人的な好み)

微調整する場合は新たに段落スタイルをつけたり(一通りの作業が終わってからのほうがよい
最後焦っていて最終的にひどい有様に……

f:id:damdom:20171027221109p:plain f:id:damdom:20171027221119p:plain

画像を用意

  1. フリクションクロッキー帳に書く。
  2. iPhoneのスキャナアプリ(Turbo Scanというのを使っています)で撮影。
  3. PDFにして保存先をiCloud Driveにする(PCのFinderから落とせる)
  4. イラレに配置→トレース(なぞって清書)
  5. eps保存
  6. InDesignに配置

表紙づくり

  • イラストの下書きをイラレで画像からパス化
    • f:id:damdom:20171027221743p:plain
  • 背景は昔自作した水彩の素材
  • ロゴ考えた
    • メインの書体は VDL メガ丸 R (Adobe Typekitからダウンロードできる書体)
    • アウトライン取ってバランス調整
    • f:id:damdom:20171027221727p:plain

まとめ

  • エディトリアルは凝り始めるとキリがない→集中して片付けたほうがいい
  • 色々な人が作ったものによって自分の創作活動を支えてもらっていることを忘れない

お知らせ

今回作った本は BOOTH からダウンロードできます〜

booth.pm

図を書くのが楽しかったので、こんなことも始めてみようかと思います。
「本作りたいけど図を書くのがなあ〜」という方、ゆる〜い図解でかわいみと親しみを増やしませんか。
絵柄は本当にこんな感じのしか書けません。初心者向けが合うと思います。
料金なども考え始めていますが、現状は知り合いの方優先で。。。年明け以降からやっていきます。