作者別: fujimoto

デザインの進捗とバージョン管理のススメ

 

こんにちは。デザイン担当のLQヒロシです。

 

WEB開発ではGitというアプリケーションを用いてプログラムファイルなどの更新状況管理をしているのですが、ファイルの更新状況を上書き時に業務ログも残しています。
この業務ログは、ひとつのプロジェクトを複数人で作業することの多いエンジニアさんにとって、他のメンバーがどのような進行状況なのか、どういったところで詰まっているのかを知る目安になっています。
プロジェクトの管理担当者も作業者を評価する指標として活用しているケースもあるかと思います。

 

もちろんデザイナーもコーディング作業であればGitを使ってファイルの進行状況を管理したり業務ログを残しますが、デザイン、特にビジュアル作成フェーズの業務ログを残すのってなかなか大変で、デザイナーの管理が難しいと言われる要因の一つかもしれません。

 

弊社ではデザインデータのバージョン管理アプリを利用して業務ログを残すようにしています。今回はその取り組みについて少しご紹介したいと思います。
Gitの仕組みを利用したものになるのでバージョン管理もできるのでおすすめです。

 

デザインデータの管理アプリについて

 

よく利用されているアプリケーションは以下の2種類になるようです。

 

Kactus(カクタス)

 

Githubベースのアプリで弊社ではこちらを利用しています。
基本的にはSource treeみたいな感じで使えます。詳しくは後ほどご紹介します。

【概要】

  • 標準のバージョン管理方法はGit。
  • 対応データ形式はSketchファイルを推奨。aiファイルやpsdファイルも利用できます。Sketchファイルの場合は、png画像を自動で書き出し差分が確認できます。

 

 

Abstract(アブストラクト)

 

デザインデータのバージョン管理アプリではこちらの方が新しく評価も高いです。

【概要】

  • Gitを介さずにできるのでスムーズな導入が可能(Git連携可能)。
  • UIが特に使いやすく、Sketchとの親和性が高い。
  • Kactusよりストレスフリーで使い勝手は良いのですが、Sketchファイルにしか対応していないのが残念。

Abstractの最大の利点はデータを保存するだけででてくるコミット入力ウィジットです。Sketch限定ですがすべての作業がSketch上で完結します。これが非常に便利!!Sketch主体で業務を行っているならこちらの方が良いと思います。

 

 

弊社ではUIデザイン以外にもロゴやイラスト作成などSketch以外で作成する業務もありますのでKactusを選びました。

 

そもそもなぜデザイン業務はログが残りにくいのか?

デザイン業務、ビジュアル作成のフェーズではIllustratorなどのソフトを使ってレイアウトを組み立てていきます。

 

手書きラフなどを先に作成する場合もありますが、基本的には画面上でオブジェクトを動かしながら組み立てていくことが多いです。
色の設定から少しづつ整っていくこともありますし、漫然とした状態からアイデアがカチッとはまって次の瞬間には出来上がることもあります。
このようなところが業務ログを残すことが難しいと感じるのではないでしょうか。

 

完璧なログを残すのではなく、保存のタイミングなどで簡単な状況説明をする、もっと砕いて言えばボヤキぐらいでもいいのでアプリを活用してちょっとしたメモを残す。「誰がどんな感じで業務にタッチしているのかがわかる」ことが重要なのではと思います。
Sketchであればpng画像として自動的に残すこともできるので尚良しですね!

 

それではKactusの利用方法について

 

KactusもAbstructも使い方は検索すれば割と見つかると思います。いくつかピックアップしましたので参照ください。

Kactus – 変更点が見て分かるデザイナーのためのバージョン管理ツール
デザインデータのバージョン管理ができるAbstractを試してみた

 

書かれている内容は概ね、新規にディレクトリを作成して対象リポジトリにするという感じですので、本記事ではKactusで実際のプロジェクトとの紐付方について少しご紹介できればと思います。

 

弊社の場合はプロジェクト毎にgithubリポジトリに紐付いているため(Web開発であれば大抵そうじゃないのかなと思います)、gitクローンするところから始めます。

 

左上メニューの File > Clone Repository を選択

こちらのダイアログが表示されるので  URLタブ内、A欄に Clone 対象リポジトリーURLを B欄にClone先のディレクトリパスを入力して Cloneボタンで完了です。
※クローンするとコーディングファイルなども落ちてくるので管理には注意してください。

 

  1. 管理ディレクトリ内でデザインファイルを作成、または更新すると、ファイル変更情報が A に表示されます。
  2. A をクリックすると ※Sketch 利用時のみ B に画像が表示されます。
  3. まずはCの Fetch origin からリモートの最新バージョンを取得します。
  4. Dの Summary欄にコミットメッセージを入力。弊社の場合はRedmineと連動しているので最低限チケット番号を入力。
  5. 細かいメモはEのDescriptionに残せば良いと思います。
  6.  Commit to master をクリックすればコミット完了。

 

最後に右上の Push origin からリモートを更新して完了です。
余談ですがhtmlなどのファイルの管理もこちらからできたりします。
※プライベートリポジトリを利用するには有料の登録が必要です。

 

 

他にもHistoryからコミットログのテキストやSketchであれば差分画像を確認できます。
Redmineと連携していればそちらでもリポジトリの履歴確認が可能になります。
ブランチの作成もできますので複数人で管理することもできます。

 

 

以上、最後が駆け足になってしまいましたが、今後もKactusのナレッジなどより良い使い方をご紹介していければとおもいます。

 

 


canvasで ”うにょうにょ動く円” を ”複数” 作ってみました

 

こんにちは、相変わらずプログラミングが覚えられないLQヒロシです。

業務の流れでcanvasで複数のうにょうにょ動く円を作ったのでレシピをまとめてみました。
参考にしたのはこちらの記事。
JavaScriptはじめました。 – くねくねする円を作ってみた。
NIJIBOX Creator’s Blog – JavaScriptで実装!理想の「うにょうにょ動く円」を求めて…

 

ただ上記の記事の内容では一つの円しか作れませんので、次の記事も参考にしてゴニョゴニョしてみました。

https://jsfiddle.net/39we73t1/

 

完成はこちら

See the Pen NLrpJv by hirotatsu fujimoto (@LQ_Hiroshi) on CodePen.

 

script全文はこちら

 

さっそく作り方を

 

うにょうにょ動く円の考え方としてはこちらの「くねくねする円を作ってみた」に詳しく載っていますので、ざっと簡単に言うと、

 

・10個のアンカーポイントをサークル上に2次元ベジェ曲線で作成し線でつなぐ
・コサイン波を利用して各ポイントをそれぞれ動かす

 

という感じでしょうか。実際のコードを見ながら説明していきたいと思います。

 

アンカーポイントはPointオブジェクトで生成しています。
ここはコサイン波の計算式が主になっていて、数学がからっきしの私は脳死で参照させていただいております。テヘ。
ちなみに9、10行目のthis.speedthis.rが乱数になっているのでこの数値を変更すると、うにょうにょするスピードや幅を調整できます。

 

次にイニシャル関数。一つの円だけで良ければPointオブジェクトをMAX(ポイントの数)分だけインスタンス化すれば良いのですが、複数の円を作成する場合はそれぞれの円で配列を作り、それぞれの円ごとにMAX分のpointインスタンスを持つというカタチで行っています。

 

円の配列については最初に定義(circles)していて、こちらに中心点座標、色、半径などのパラメーターを設定しています。中心座標と半径はPointオブジェクトに引き継がれ、色と各ポイントの配列は後述するdrawCircle関数に引き継がれています。

 

そしてイニシャル関数からupdate関数を呼び出し、Pointオブジェクトのupdateメソッドを呼び出して実際のアンカーポイントを生成しています。考え方は参照記事と同様なのですが、複数円を対応するのでこちらでも各円ごとに処理を行う必要がでてきます。
ポイントを生成したらdraw関数で描画を行いsetTimeoutで繰り返し処理を行っています。

 

描画について

 

draw関数はsetTimeoutで繰り返し実行されるので、まずはclearRectで描画を初期化します。引数でcirclesを渡し、円の数だけdrawCircle関数(実際の描画処理を行う関数)を実行しています。これはcircles内にある各円が色とアンカーポイント情報を持っているので、円ごとに一つづつ描画処理を行うためにこのように処理をしてみました。これはこちらの考え方を参考にしています。

https://jsfiddle.net/39we73t1/

 

drawCircle関数ですが、こちらは参考にした「JavaScriptはじめました。 – くねくねする円を作ってみた。」の処理方法を活用させていただいてます。引数で各情報を渡して2次元ベジェ曲線を描画し塗りつぶしています。最後にonloadcanvasお決まりの構文を書いてinitすれば完了です。

 

 

これを作成する前に複数の円を描画する記事をググって探してみたんですが、なかなか見当たらなかったので自作した次第なので色々と不手際な部分もあるかと思いますが、canvasでこのような表示をやってみたいと思っている方の一助になれば幸いです。それではまた!

 

以下、scriptの全文になります。


Webスクレイピングをはじめてみました(1)

 

こんにちは、長年Webデザインに携わってきましたがプログラミングがなかなか覚えられないLQヒロシです。

今回は一念発起して、流行りのPythonWebスクレイピングをしながらプログラミングを勉強していこうという試みです。

なぜWebスクレイピングなのか?

 

PHPのちょっとした修正や、jQueryを使ったクリックやリサイズの簡単なイベントぐらいはできるけど、そこから先になかなか進めない・・。デザイナーなんだしJavaScriptUI周りのエフェクトとかを実装できるようになりたいと思ってはいるのですが、UI周りってイベント同士が絡んだりすると途端に難しくなってなかなか続かないのが目下の課題だったりします。

簡単なアウトプットを段階的にこなしていって、ファンクションのまとめ方だったり、データのやり取りなどプログラミングの勘所を掴んでいけるのが理想的ですよね。

Webスクレイピングであれば、WebサービスのAPI活用・クローリングでのデータの収集、データベースへの保存や取り出し、データの加工の作成という一連の流れが小規模なカタチで勉強できるので、体系的にポイントを抑えた勉強ができそうです。データを加工するのに正規表現も使うことになりそうだし。

 

プログラミング言語はpythonを使用し、ツイッターと連携して画像を収集しギャラリーサイト作成を最終的な目標としたいと思います。

 

第一回目は、スクレイピングとPythonについてご紹介できればと思います。

そもそもWebスクレイピングとは?

 

厳密にはクローリングとスクレイピングに分けることができます。

・クローリング
WebサイトのハイパーリンクをたどってWebページを探す作業

・スクレイピング
Webページから必要な情報を抜き出し、整形し直す作業

例えば、電子書籍の販売サイトから書籍情報を抜き出して価格を比較、最安値の情報のみをまとめるなど、要するに複数のWebサイトから任意の情報だけを抜き出し、雑多なデータを整理して有益な情報にすることでしょうか。

Pythonって何?おいしいの?

 

GoogleFacebookで採用されていて、機械学習やIoTの事例も多い現在最も旬な言語とも言われていますので、おいしいです。他のプログラミング言語同様、WindowsMacOSLinuxなどのプラットフォームで動作でき、環境構築・Webシステムの開発~データ解析までひとつの言語で実現できることから世界中で広く使われています。

Pythonの特徴

 

文法が読みやすい

 

プログラムは一度書かれた後も他の人に読まれるもの。pythonでは「シンプルで読みやすいコードが書けること」という設計思想があり、コード上の装飾が極力少なくなるような記述方法になっています。少し文例を見てみましょう

実行結果:hogeです

 

このように文の終わりに閉じタグが必要なく、制御構文では影響する範囲を括弧で囲む代わりにインデントで定義。変数は代入するだけで宣言されたことになるのでとてもすっきりとして読みやすいコードになります。

Pythonってなんだか難しそうなイメージがありましたが、PHPなどと比べても別段特殊な書き方をしているわけでもなく、文法が見やすいので非常に馴染みやすく感じました。教育の現場でも採用されていたりするそうで、プログラミング初心者にも学びやすい言語だと思います。

 

・導入が簡単!

 

MacならHomebrewでインストールするだけですぐに使えました。コンパイルする必要もないので、ぶっちゃけ笑ってしまうぐらい早いですwww

(以前PHPを導入した際は、php.iniファイルの設定を調整したり、事前にDBを用意したりと面倒だった思い出があります。)

 

・豊富なライブラリ

 

Pythonには正規表現、数学関数、通信プロコトルなどの標準ライブラリが非常に豊富でインストールするだけで利用が可能です。さらにサードパーティ製のライブラリも豊富に提供されています。最近ではディープラーニング用のTensorFlowなどが有名ですね。データ解析のライブラリも強力で、スクレイピングしたデータをインフォグラフィックとして表現できたりもします。

 

それではPythonの導入方法を見てみましょう

 

Pythonは2系と3系があり、現在は3系が主流になりつつあります。2系と3系の間には互換性がありません。Macではデフォルトでインストールされていますが2系だったりするので、Homebrewで3系をインストールします。

 

 

バージョンを確認してみましょう

 

Homebrewでインストールしたものが参照されているか確認します。

と表示されれば準備は完了です。

 

では、対話方式でプログラム実行できる「インタラクティブシェル」でPythonを動かしてみます。やり方はターミナル上で「python3」と入力するだけですw

立ち上がったら上記のようなメッセージが表示され、コマンド受付状態になります。では、構文を入力してみましょう。

はい、これだけですw簡単ですw

 

終了する時は

または

これでbashに戻ることができます。

 

第一回目は以上になります。説明や導入を中心に駆け足でご紹介してきました。
まだまだ勉強中の身のため、上手く伝えられず分かりにくい部分が多々あると思いますが、次回からは実際にPythonを利用して少しでも魅力をお伝えできればと思います!


読みやすい文章を組み立てる3つの法則

 

こんにちは。
デザイナーのLQヒロシです。

 

以前、読みやすい(分かりやすい)文章書くためのちょっとしたコツをご紹介しました。「かかる言葉と受ける言葉をなるべく近づける」というものです。単語間での修飾・被修飾関係を正しく配置しようというものでした。

 

今回はその第二回。より踏み込んで、読みやすい文章の組み立て方を考えてみようというものになります。例によってこちらの本を参考にしております。

新装版 日本語の作文技術

新装版 日本語の作文技術 本多勝一(著)

 

 

前回の内容はこちらからご覧いただけます。

読みやすい文章を書く、ちょっとしたコツ

 

読みやすい文章には組み立てる順番がある

 

(1)節を先に、句をあとにする

(2)長い修飾語ほど先に、短いほどあとにする

(3)重要な内容ほど先にする

 

これが3つの法則です。

「節」や「句」といった馴染みの薄いワードがでてきましたので、まずはこちらから説明していきます。

 

・「節」:1個以上の述語を含む文のかたまり
・「句」:述語を含まない文の最小単位(フレーズ)

これらの語法は、言語学者によって定義が異なるようですが、本記事は本多勝一氏の定義する用法に沿って進めていきます。

それでは(1)はどういうことになるのでしょうか。

(1)節を先に、句をあとにする

 (例1 ※P70抜粋)

 

この3つの言葉をひとつにまとめて、「紙」という名詞にかかる文を作るときの組み合わせを考えてみます。

 

A. 白い横線の引かれた厚手の紙
B. 厚手の横線の引かれた白い紙
C. 白い厚手の横線の引かれた紙
D. 横線の引かれた白い厚手の紙
E. 横線の引かれた厚手の白い紙
F. 厚手の白い横線の引かれた紙

 

ABは、「白い横線」または「横線が厚手」であるかのように捉えられる恐れがある。CFも「厚手の横線」「白い横線」にかかるような違和感があり、理解するのに時間がかかる。DEなら誤解なく読むことができる。

 

では、DEの違いはどこにあるのでしょうか。

 

それは「横線の引かれた」(節)が先にあり、「白い」「厚手の」(句)があとにあること。ABを見れば、「横線の引かれた」という節が、「白い」または「厚手の」という句のあとにくると、修飾は節の中の先の方の名詞「横線」だけにかかってしまうことがお分かりいただけるかと思います。

(2)長い修飾語ほど先に、短いほどあとにする

 

(1)の例では節がひとつだけでしたが、複数ある場合にどう組み立てるかを考えてみます。


 (例2 ※P74)


これに次のような修飾語をつけて語順を組み合わせてみます。

 (例3 ※P75、76)

 

① Aが私がふるえるほど大嫌いなBを私の親友のCに紹介した。
② Aが私の親友のCに私がふるえるほど大嫌いなBを紹介した。
③ 私がふるえるほど大嫌いなBAが私の親友のCに紹介した。
④ 私がふるえるほど大嫌いなBを私の親友のCAが紹介した。
⑤ 私の親友のCAが私がふるえるほど大嫌いなBを紹介した。
⑥ 私の親友のCに私がふるえるほど大嫌いなBAが紹介した。

 

この中で④が最も自然でわかりやすい文章であることがお分かりいただけると思います。

 

私がふるえるほど大嫌いなBを私の親友のCAが紹介した。

 

図解にしてみると以下のようになります。

 

 

「日本語の作文の技術」では、複数の例を挙げ、類似性をより事細かに検証しています。興味があればご一読いただくことをオススメします。著書では以下のように結ばれています。

 

ケースによって他のさまざまな要因がからんでくる。しかしこの原則は、物理的な単なる「長さ」だけの問題であるにもかかわらず、文のわかりやすさ・自然さを決めるための最も重要な基礎となすものといえよう(※P82

 

(3)重要な内容ほど先にする

 

節が複数あり、さらにその節の長さが同じ(対等)である場合はどうするのか?これが最後の法則になります。

 

① 初夏の雨がもえる若葉に豊かな潤いを与えた。
② 初夏の雨が豊かな潤いをもえる若葉に与えた。
③ もえる若葉に初夏の雨が豊かな潤いを与えた。
④ もえる若葉に豊かな潤いを初夏の雨が与えた。
⑤ 豊かな潤いを初夏の雨がもえる若葉に与えた。
⑥ 豊かな潤いをもえる若葉に初夏の雨が与えた。

(例4 P78

 

「初夏の雨が」「豊かな潤いを」「もえる若葉に」も節の長さが同じなので、どれが分かりやすいかを決めるのが難しくなります。著書を参照してみると

 

「初夏の雨」が全体の中で占める意味が最も重く、大きな状況をとらえている。しかし「豊かな潤い」は、「初夏の雨」という状況の中での小さな状況であり、「もえる若葉」のさまざまなありようの中の、ひとつのあらわれ方にすぎない。(※P88

 

という考察があり、最良の語順は以下になります。

 

初夏の雨がもえる若葉に豊かな潤いを与えた。

 

まとめ

 

第一の法則「節を先に、句をあとにする」

第二の法則 「長い修飾語ほど先に、短いほどあとにする」

第三の法則 「重要な内容ほど先にする」
(大状況から小状況へ、重大なものから重大でないものへ)

 

以上、ざっと進めてきました;
ボリュームがあるので説明が不十分なところもあるかと思いますが、そこは本多氏の著書をご覧いただければと思います。いずれの法則も「かかる言葉と受ける言葉をなるべく近づける」ための方法なのかなと考えることができそうです。

 

上記の法則を意識することで文章がより分かりやすくなることが、何となくでもご理解いただければ幸いです。

 


デザイナーでもgrepコマンドをサクッと使いたい!

 

こんにちは、Vimmerもある程度板についてきたLQヒロシです。

 

コーディング業務で「CSSのクラスがどのファイルでどこに使われているのかざっと知りたい」ってことありますよね。

統合開発ツールなどを使っているとツールそれぞれで検索方法があると思いますが、Vimmerである以上ターミナルで行う必要があります。そこで活躍するのが「grep」コマンド!

 

今回はターミナルで利用するUNIXLINUX)検索コマンド「grep」のご紹介になります。
なお対象がデザイナーなのでMacユーザー(ターミナル)を前提にしております。

 

grepってなんかややこしいイメージ

 

grep 使い方」などでググると結構なリファレンスが出てくるのですが、やたらオプションは多いし説明が分かりにくい!さらにfgrepだのegrepだのがあってLQLow Quallity)な私は敬遠しがちでしたが、エンジニアさんに聞いてみるとよく使うやり方は決まっているようでしたので、デザイナーに最適なgrepの使い方をまとめてみました!

 

結論、「fgrep -rn ‘検索文字列’ ファイルのパス」を使っておけば問題無い!

 

いきなりfgrepが出てきて恐縮ですが、その説明は後でさせてもらうとして、まずは簡単に使い方の説明から。

 

 

grepもfgrepも検索方法が若干異なるだけで基本的な使い方は同じになります。
はじめにコマンド、次にハイフンを付けてオプション。検索したい文字列と検索対象となるファイルパスを入力します。オプションをつけることで検索方法や検索結果の表示方法を細かく指定することができます。

 

[よく利用するオプション(grep、fgrep共通)]

r

再帰的に検索する
要するにサブディレクトリまで全て検索範囲にできるということ

n

検索結果に行番号を出力する
検索結果は、ファイル名だけでなく対象文字列が使われている箇所も抽出されるので、行番号を表示するとより分かりやすくなります

 

例えば以下のようなディレクトリ構成でCSSのクラス名を検索する場合、

 

$fgrep -rn ‘hoge’ home/assets/css/

 

と入力すれば、サブディレクトリがあっても全てのCSSファイル内のhogeクラスを検索できるというわけです。CSSルートにアクセスして以下のようにしてもOKです。

 

$fgrep -rn ‘hoge’ ./

 

例えばプロジェクトルートからだとこのようにすることもできますね。

 

$fgrep -rn ‘.hoge’ ./

 

※「.hoge」とするとCSSクラスである可能性が高いので、プロジェクトルートからでもCSSのみを抜き出しやすくなります。(jsは引っ掛かってきますが。。)

 

 

なぜgrep ではなく fgrepを使うのか

 

grepは正規表現が利用できるので、「.hoge」と「hoge」では結果が異なる場合があるため。

 

正規表現では「.」をワイルドカードと認識します。grepの場合「.hoge」は正規表現を使っていることになり、ahogebhogeという文字列が存在していると一緒に検索されてしまうのでエスケープ処理を行う必要がでてきます。

 

$grep -rn ‘¥.hoge’ ファイル名

 

その点、fgrepは正規表現が利用できないので、エスケープ処理を省くことができます。さらにfgrepの方が抽出速度が早いというメリットもあります。

 

正規表現で検索したい場合はgrepが良いですが、単純な文字列であればfgrepが良さそうですね。(ちなみにgrepで「-F」オプションを使うとfgrepとほぼ同様の機能になります。)

 

 

文字列を「’」シングルクォートで囲むのを忘れずに

 

半角スペースや「*」「?」などはシェル(ターミナル)にとって特別な意味をもつ文字列になります。これらの文字列が含まれる場合に展開されないようにシングルクォート(ダブルクォート)で囲む必要があります。

 

例えば以下の例だと検索結果が変わってきます。

$fgrep foo bar assets/css/   //foobarから検索
$fgrep ‘foo bar’ assets/css/  //foo barを検索


これはシェルにとってスペースは引数の区切り文字として展開されるためです。文字列に半角スペースや記号文字が含まれる場合は注意しましょう。

 

 

少し慣れてきたら…

 

複数の文字列を指定して検索する

$fgrep -e ‘hoge’ -e ‘foo’ /assets/css/

 

指定した複数の文字列を含む行を取り出す

$fgrep ‘hoge’ /assets/css/index.css | fgrep ‘foo’

 

なんてこともできます。

 

 

いかがでしたでしょうか。まとめてみると、そこまで難しくなさそうな気がしてきました!LQな私はこのぐらいでお腹いっぱいですが、他にも便利なオプションがたくさんあるので使ってみても良いかと思います!

 

以上、簡単ではありますがgrepの使い方のご紹介でした。

なおターミナル・vimの使い方はこちらをご覧ください。

https://blog.splout.co.jp/3249/