はてなブックマーク

Macのスクリーンショットはデフォルトの状態だと不恰好なファイル名でデスクトップに溜まっていってしまう。ターミナルにコマンドを打ち込んで変更しておこう。また、以下のコマンド killall SystemUIServer で変更した内容は再起動しても元には戻らないので、間違えた場合はコマンドで戻す必要がある。 デフォルトのファイル名は「カナ名」＋「日付」＝ スクリーンショット 2018-02-18 10.00.00 デフォルトのファイル形式はPNG デフォルトの保存場所は デスクトップ ファイル名（カナ名）スクリーンショットの部分を変更 $ defaults write com.apple.screencapture name "ScreenShot" $ killall SystemUIServer スクリーンショットの部分を削除 $ defaults write com.apple.sc

ターミナルで $ のより前の文字列（プロンプト）がデフォルトだと以下のようになっている。 コンピューター名:~ ユーザー名 $ コマンド操作をスクショで共有する時、このコンピューター名・ユーザー名の表示いらないなーと思った。これは自動で出力されているのだけど、なんとか設定で非表示にできないものか。 ※ターミナルについてざっくり把握したい方は前回の記事を参照してもらえたらと。 Macのターミナルをそれとなく理解してコマンドを使う | Qookie Tech プロンプトの変更は簡単$ マークから前のプロンプトを変更するには PS1 という環境変数に別の値を入れるコマンドを入力する。まずは、今入っている値を表示してみる。出力は echo コマンドで、変数を参照するには $ マーク＋変数名。なんとなくPHPっぽい。 $ echo $PS1 ↓ $ echo $PS1 \h:\W \u$ バックスラ

Google Fontsは僕が最も気に入っているフォントライブラリ。誰でもURL貼るだけでWeb Fontを使えるし、オープンライセンス（フォント毎に詳細は異なる）で利用制限もないから。 僕がフォントをリリースしたときも正にGoogle Fontsの仕組みと姿勢を手本にした。 手軽なぶんアカウント管理も無く、どのフォントを使っていたのか忘れがちなのでここに記録しておきたい。元々はMacのクリーンインストール手順4に含めていたけれどボリュームも多いので分離した。 Google Fonts Roboto Google製の欧文フォント。Androidアプリなどのマテリアルデザイン用。 Roboto - Google Fonts Open Sans 定番の欧文ゴシック。ヒラギノやメイリオに混ぜても違和感がなく使いやすい。 Open Sans - Google Fonts Lato 定番の欧文ゴシッ

ディレクトリ構造をテキストで書いて説明するとき、以前はすべて手打ちしていた。しかし、「MacならTreeコマンド使えば自動で一発出力できるよ」と教えてもらい救われた。そう、いちいち「罫線」を変換しながら書くなんて前時代的だったのだ。 HomebrewをインストールTreeはHomebrew（ホームブルー）でインストールするので、Macに入っていない場合は先に入れる。X Codeも必要。 Homebrewというのはコマンドラインで使うmacOS用のパッケージマネージャー。簡単なコマンドを入れるだけでプログラムをインストールできるようになる。公式サイトのトップにインストール用のコマンドが掲載されているので、それをターミナルにコピペしてインストールしよう。 Homebrew — macOS 用パッケージマネージャー コマンドを実行すると、途中で承認・管理者パスワード入力・Command Line

CSSは、擬似クラスを使ってスタイル付与の条件を細かく設定できる。「最初だけボーダーを付けない」や「背景色をストライプにする」などが代表例。 上手く使いこなせると、「HTML構造は今更変えられないのでCSSの追加で何とかできないか」といったクイズのような古いサイト改修案件も捌きやすくなる。 擬似クラスの特徴擬似クラスは基本的に「親要素からみて何番目の子要素」というルールで対象を特定する。また、大きく ●●-child ●●-of-type という2つの書き方があり、●●-of-type で書くと同じ種類だけを数えるようにできる。 また、複数組み合わせることも可能。その分詳細度が高まってしまう点には注意。 最初・最後 /* 最初の要素 */:first-child { color: red;}/* 最後の要素 */:last-child { color: red;}/* 同じ種類で順番が最初

Webの高速化志向は年々高まっており、サーバーサイドでの動的な処理を行わない静的サイトジェネレーターや、SPA（シングルページアプリケーション）が使われることも珍しくなくなった。 今回紹介するNetlifyは、そういった環境の運用をとても楽にしてくれる。 Netlify: All-in-one platform for automating modern web projects. NetlifyとはNetlify（ネトリファイ）は、静的コンテンツをホスティングしてくれるWebサービス。GitHub・GitLab ・Bitbucketのリポジトリから自動的にデプロイを行える。 2016年に$2.1M（約2億円）の資金調達を成功させたスタートアップとして注目された。 NetlifyのメリットWeb UIが分かりやすい Web UIがとても洗練されている。基本的に英語のサービスだけれど内容は想

npmライブラリはとても便利なシステムなので、GulpやHexoで散々使わせてもらっている。ただ、マイナーな機能のライブラリだと選択肢が少ない・未完成・メンテナンスサポートされていないことがある。 「このライブラリ、ちょっとだけ直して欲しい」というときにプルリクエストしても反映してもらえるか分からない。仕事の事情で待っていられない状況は多いので、GitHubでnpmライブラリをForkして対応する。 GitHubでForkする理由 npmにGitHub上のライブラリを参照する機能があるから npmに紛らわしいライブラリを増やさないで済む npmライブラリ制作者に一応の報告となるので紳士的 GitHub上に一時対応を保存することでバックデートを防げる GitHubでForkする方法1. GitHubリポジトリを見つけるまずはGitHub上のコードを見つける。npmライブラリのGitHub U

Web制作の現場では、技術の存在を知らないことで非効率な作業を続けてしまうことが少なくない。ただ、新しい技術を習得するのは時間もかかるので、習得コストとメリットを天秤にかけることだろう。 僕が習得して良かったと感じている技術の1つに「gulp.jp（ガルプ）」という自動化ツールがある。 ここでは、Webデザイナー目線でこのgulpの概要とメリットを伝えたい。「そういうことに使えるなら覚えておいた方がいいか」と重い腰をあげてほしい。 gulp.js gulpの概要gulpは、作業の自動化と強化を行うツール。例えば、コードの結合・コードのMinify・スプライト画像の作成・画像の圧縮など、面倒だけどやったほうがいい作業を自動化できる。Node.jsで動くので、事前にNode.jsをMac/PCへインストールしておく必要がある。 使う際には、制作するプロジェクトのディレクトリに npm でgul

古いサイトのヘッダー改修で全ページを修正したり、微妙にことなるHTMLを繰り返し大量に書いたり（エディタがどんどん重くなる）、閉じタグ忘れを血眼になって探したことはないだろうか。 EmmetとSassでコーディングはかなり楽になったけれど、僕の作業を一番効率化してくれたのは、同時期に覚えたPugという技術だった。ここでは、Pugの概要とメリットを簡単に紹介したい。 Getting Started – Pug PugとはPug（パグ）は、HTMLを効率的に書くためのテンプレートエンジン。使い方はCSSで言うSassみたいなもの。拡張子 .pug のファイルを書いてHTMLに変換する。 もともとはJade（ジェード）という名前で開発されていたものの、商標の関係で2016年あたりにPugとして再リリースされた。新しいPug（2018年3月12日現在v2.0.1）は繰り返しや属性などの書き方が若干

同じようなCSSを繰り返し書いて嫌になったことはないだろうか。サイトで使っている色が煩雑になってしまったことは。僕も、散々不毛なCSSを書いていたけれど「Sass」を覚えてかなり楽になった。 Sass: Syntactically Awesome Style Sheets SassとはSass（サス）は、CSSを効率的に書くことができるメタ言語（CSSプリプロセッサ）。語源は「書き方 （Syntactically）がイケてる（Awesome）スタイルシート（Style Sheets）」の略らしい。 書き方は2種類ある。Rubyのようにインデントのみで書いていく「Sass」スタイルと、CSSと同じようなカッコでくくる「SCSS」記法。主流なのはSCSSで、普通のCSSもそのままコピペで使える。 ファイルの拡張子もそれぞれ .sass .scss となっている。 Sassスタイル：インデント型

ブログの記事数が20本近くなってきて、そろそろ書いた文章をチェックしておかないと億劫になるタイミング。 2017年にリリースされた文賢というサービスが気になってはいたのだけど、夫婦で2アカウント使うとAdobe CC並みの金額になってしまう。目的に対してコストかけすぎなので、もうちょっとライトに使えるものはないかと探した。見つけたのがtextlint。 参考：textlintで日本語の文章をチェックする | Web Scratch textlintとは日本人が開発したMarkdownなどテキスト向けの自然言語向けのLintツールで、文章チェックのルールをnpmで拡張できる仕様。各言語に対応するため本体にはチェックルールが含まれておらず、扱う言語に合わせて導入する。 基本的にはタスクランナーやCIサービスに絡めて使うのでエディタでMarkdown書いてる時には使いやすい。ただ、前回書いた通り

自分用のブログを作るにあたって、ブログサービスを利用したりWordPressをこさえたりすることにもう疲れてしまった。ブログサービスはコミュニティとしての利点はあるものの、細かい調整ができずストレスになる。WordPressはサーバー費用やらセキュリティ工数やらがのしかかってくる。そこで使い始めたのが静的サイトジェネレーター。 静的サイトジェネレーターとは簡単に言うと、用意したMarkdownファイルなどから普通のHTML/CSS/JSを生成してくれるツール。ややこしいデータベースと無縁。ローカルで確認できるただの静的サイトが吐き出されるので、それを丸ごとサーバーに上げるだけ。公開用のデータが1つのフォルダにまとまっているからサーバー引っ越しが簡単。すべてが静的ページなので当然表示が早い。 どうやって使うものなのか静的サイトジェネレーターをコマンドラインでMac/PCにインストールして、コ

Macのメンテナンスとしてクリーンインストールを用いる方法を計4回に分けてまとめてみた。「Macの調子が悪くてまっさらからやり直したい」「新しいMacで心機一転綺麗な環境を作りたい」という方は参考にしてほしい。僕は、ここに書いた内容を頼りにクリーンインストールを行なっている。今回は事前準備。 Macのメンテナンスはクリーンインストールで【1】事前準備 ← 今ここ Macのメンテナンスはクリーンインストールで【2】実行 Macのメンテナンスはクリーンインストールで【3】基本設定 Macのメンテナンスはクリーンインストールで【4】追加設定 メンテナンスの方針「Macが遅い」「メモリは足りなくなる」などを機に、メンテナンスするならクリーンインストールが最も効果的。というか完全な初期化（工場出荷状態に戻す）を行うので、人によってはやりすぎだと感じるだろう。 ただ、一時的な整理整頓・動作不良の検証を

印刷物制作やWebのカンプ制作をやっていると、どでかいデザインデータ（AI・PSD）が溜まっていく。特に高解像度の写真を埋め込んだ瞬間。途中まではサンプル画像で進めたりもするけど、入稿や納品が近づくと完成品に目を慣らしていく必要が出てくる。完成間際で「実際の写真入れたらショボかったです」とかなると目も当てられない。 そこで、写真を入れ替えた複数バージョンのデザインデータを「パンフレット-v3-18021601」なんて名付けて保存していくのだけど、これがストレージを圧迫する。デザイナーのMac/PCがパンパンなのはデータの複製かもしくは素材収集が原因となっている。こういうのもう止めたい。 テキストデータのHTMLやCSSなどであれば、前の記事で書いたGitを使うのが便利なのだけど、差分の取れない大容量バイナリデータであるデザインファイルの扱いは難しい…。 Git・GitHub・SourceT