読者です 読者をやめる 読者になる 読者になる

ブロックチェーン勉強会を開催しました!〜概念編〜

SKIYAKIでエンジニアをしているdoimaと言います。

 

最近話題の技術といえばいろいろなものがありますね。例えばVRだとか、ディープラーニングだとか、IoTだとか・・・。未来の到来をヒシヒシと感じております。

 

そんなさまざまな新技術の中で、今回はブロックチェーンに着目したいと思います。

ブロックチェーンは聞き馴染みがあるかたもそうでない方もいらっしゃると思います。

 

ブロックチェーンとは、先ごろ世間を騒がせたビットコインの基幹技術です。でもビットコインもよく分からない・・・。ブロックチェーンもよくわからない・・・。ブロックがチェーンされてるんだよ!とか仮想通貨とか・・・Web界隈を中心とした今の僕たちの知識ではもはや追いつかない・・・。

 

 

わからないことはきいてしまおう!

 

ということで、

 

f:id:system-skiyaki:20160804200305j:plain

 

最近注目の技術を掘り下げている、株式会社オルトプラスの嶋田健作様と嶋田大輔様をお招きし、ブロックチェーン勉強会を開催しました!!!

  

そこで学んだことを僕なりに噛み砕いて説明していきたいと思います。

 

そもそもビットコインってなによ?

 

ビットコインは仮想通貨仮想通貨と世間では言われていますが、

正確にはCrypto Currency(暗号通貨)なのです。暗号によって価値が担保されているんですね。

暗号通貨とはどういうことなのか。

ビットコインはそれ自体にいくらいくらという数字を持っているわけではありません。

ビットコインが持っている情報は、取引データと、その取引データの前のブロックのhash値です。

AさんがBさんに100円、CさんがDさんに200円、DさんがEさんに150円という取引データがあったとします。

このデータを暗号化してhash値にし、その次の取引のデータとして保管、そして取引データを保管します。

f:id:system-skiyaki:20160805200003p:plain

そしてこのデータをまたhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し、そのデータをhash化し取引データと一緒に保管し(以下略)

 

f:id:system-skiyaki:20160805200536p:plain

 

という形で、情報のブロックをチェーン状に数珠繋ぎします。

どこかで聞いた言葉が顔をのぞかせた気がしますが、一旦説明は割愛します。

この情報の塊を、みんなで保管したもの、それがビットコインの正体です。

 

ビットコインは数値ではなく、取引を繋いだものを保管しているだけなので、どこかのデータだけ変えるということができません。特定のデータを差し替えることは、それ以降の取引データをそのデータを持っている全員分を全て変える必要があるからです。

それがビットコイン改ざんしづらいという特性に結びついています。

 

※ちなみにビットコインの取引を始めるときは、ウォレットというアプリを利用します。ウォレットにはさまざまなタイプがありますが、全部手元に取引データを持っておく形式だと、超巨大なデータのダウンロードと計算が始まります。

 

では、世界中で行われるさまざまな取引の正確性を担保しているのは一体誰なのでしょうか。

それに関連するワードビットコインのひとつのキーワードのひとつである、マイニング(採掘)です。 

ビットコインは一番長いつながりを正とします。長いものにはまかれろというメッセージです 

そして世界中のコンピュータが正しいかどうかの計算をひたすらしています。

そして正しい計算をして(=ブロックを発見して)、ブロックをつなげていきます。この時、ブロックを発見した人には計算のお礼としてビットコインが与えられます。これが採掘です。

ビットコインの処理の正しさはこのProof of Work(仕事による証明)によって担保されています。

頑張ればビットコインがもらえるぞー!というゴールドラッシュ的な思考がビットコインを維持しているのですね。

このシステムはビットコインの偽造を阻むものです。つまり、原理的に偽造通貨、贋札が作れないということです。

※Mt.Gox事件は不正に送金するようなシステムを組み込んだもの、つまり偽造ではなく横領です。だからビットコインの信頼性が揺らいだわけではない、といわれるのです。

 

ビットコインの計算量は膨大なものなので、専用サーバで行われています。ビットコインの計算に最適化されたチップも存在するくらいです。

当然その構築、運用には費用がかかります。ビットコインは現実の通貨を置き換えられて存在しているとも言えます。

 

さて、Proof of Workには弱点もあります。このシステムは計算する人の大半が不正をしない善人である、ということが根拠になっています。もし計算する人の過半数が悪意を持っていたら?

ビットコインは乗っ取られます

これを51%アタックと言います。

 

これがビットコインのシステムであり、なぜ価値を持っているのかというお話でした。

 

じゃあブロックチェーンてなによ??

ビットコインの説明でちらっと出てきた、情報のブロックをチェーン状に繋いだものというワード、つまりこれがブロックチェーンです。

 大変わかりやすいですね。

 

ブロックチェーンの持つ価値とは、ビットコインと同様に、ゼロダウンタイム、改竄できない、データが消えないの三本柱です。

 

 

ブロックチェーンは DBと比較されますが、ブロックチェーン自体はDistributed Ledger Technology、分散型台帳技術というワードで説明されます。

大福帳型データベースに近い概念です。データベースと対比されるものではなく、むしろ概念として新しいものかと。

 

特性としては、

 

・ブロックチェーン

 - チェーン型の台帳

 - 取引履歴として記録

 データが分散されている

 

・(標準的な)データベース

 - 表

 - データとして記録

 - データの冗長化が必要

ということですね。

 

ビットコインはパブリックなブロックチェーンですが、特定の管理者によるプライベートブロックチェーンもあります。

ただしこれはパブリックブロックチェーンにあるいくつかのポイントを犠牲にします。

たとえば、ビットコインの信頼性を担保していたのはProof of Workですが、プライベートなものであると計算量が減り、乗っ取ることが容易になります。

また、マイニングのような価値の源泉がないため、ユーザにモチベーションを与える別の手段が必要です。

また、ビットコインを所有する人がシェアしていたデータですが、プライベートブロックチェーンは団体が管理するサーバ上にデータがあるので、それが全て潰れてしまえばやはりアウトです。

ある程度の規模感がないと、先ほどのメリットを減じてしまう結果となり、ブロックチェーンはその役割を果たせないです。

ブロックチェーンは900億を90億にする技術と言われており、膨大なデータがあってはじめて価値を持ってきます。

 

また、ビットコインはブロックチェーンの第一弾なので、応用が効きにくい部分も多々ああります。

それを補うものとして、NEMEthereummijinといった新しいブロックチェーンのサービスが生まれています。

これらはビットコインにはなかったシステムを持っているものもあります。

その中の1つが、スマートコントラクトです。スマートコントラクトはトランザクションの中に簡単な処理を入れるというものです。

AさんからBさんに100円払うと、自動的に10%をCさんに払うといったり、独立された処理が可能になります。

この仕組みを用いて、ただの価値移転だったブロックチェーンのデータ変更時をより膨らませることができるのです。

 

以上がブロックチェーンとは?という説明になります。

 

仕組みはわかったけど、何に使えるの???

 

ブロックチェーンは信頼性を担保しやすいシステムです。なので、信頼を必要とするあらゆるシステムに対して適応できます。

 

・有価証券取引

 お金の代替のようなものなのでわかりやすいですね。

・公証人の発行する書類

 公証人は公的書類を証明する人(まんまやな)なので、その書類の証明をブロックチェーンで行えます。

・シェアリングエコノミー

 LaZoozというカーシェアリングサービスや、Storjというファイルストレージサービスにはブロックチェーンが用いられています。スマートコントラクトのようなシステムもこういった処理に適しています。

アテンションエコノミー

 あまり聞きなれないワードですが、情報が氾濫している中で、強く関心を引きつける発信者が価値を持つということです。ブロックチェーンにより関心の伝播のトレースがしやすくなります。

・チケット

 弊社で関係する分野といえばライブのチケットです。この分野ですでにコンセプトを発表しているLAVAはライブチケットをブロックチェーンで実装しようとしているプロジェクトです。

 

ブロックチェーンはまだまだ新しい技術で、活用方法をいろいろなところが模索している段階ですが、成熟しきっていないものを利用できる応用例を探す楽しみがあると思いました。

SKIYAKIでは、そんな最新技術を使って何かをしてみたい!というエンジニアも募集しています。

 

次回は、ブロックチェーンをちょっと動かしてみようと思います。乞うご期待!!!

 

 

 

読みやすい文字組み はじめの一歩 - Illustrator編

みなさまこんにちは。
SKIYAKIでクリエイターをしているコウです。


現在SKIYAKIでは、フライヤーなどの印刷物を制作させて頂く機会も多いのですが、今後じっくり文章を読んで頂くことがメインの冊子の制作予定が新たに出てきました。


そして、気になったのが……文字組み。


フライヤーは、手にとった方へいかに効率よく必要な情報を伝えられるか、短い時間内にどれだけの印象を残せるかを念頭にして、目に入ってきやすい文字組みをパーツごとに調整(=ツメ組み)するよう心がけていたのですが、長い文章メインの文字組みとなると違ってきますよね、、、ということで。


通常であれば、まずは以下を決めていく流れになると思うのですが、今回はある程度のフォーマットが予め決まっていたため割愛します。
 ・1ページに対して何段組みにするのか
 ・1段分の文字組は、何文字×何ラインにするのか

この辺りを考える上でもっと詳しく知りたい方は、以下の記事をどうぞ。

1行の文字数と文章の読みやすさ|いまさら聞けない!? 印刷・DTPの基礎知識|OKIデータ





今回、改めて見直してみたいな〜と思ったのは、Illustratorの文字設定。

しかしながら、奥深すぎて踏み出した足をつま先2cmで既に引っ込めたい状態。以下、あくまでも「今回の場合」&「てはじめに」ということを前提に読み進めていただけると幸いです。。


1. テキストボックスを作成

「1Q=1H=0.25mm」を元に、ボックスの縦横を算出。

今回は以下で作成しました。

文字サイズ12Q×26文字:行送り20H×縦44ライン=横78mm:縦220mm

 


2. 文字間のカーニングの設定
▼自動

f:id:system-skiyaki:20160607202811p:plain
オプティカル

f:id:system-skiyaki:20160607202904p:plain

▼和文等幅

f:id:system-skiyaki:20160607202910p:plain


今回はベタ組みにしたいので「和文等幅」をセレクト。
それにより、和文は正方形の仮想ボディをキープしつつ、欧文はメトリクス(美しい間隔になるようにフォントメーカーが各文字に忍ばせた文字詰め情報を優先した状態 ※そんなに忍ばせていない場合もある模様)になります。
ちなみに「オプティカル」を選ぶと、Illustratorが書体のサイズを判断した字詰め具合になり、「自動」を選ぶと和文・欧文ともにメトリクスと同じ効果になります。

※自動(メトリクス)を選ぶとき、後からさらに文字詰めを手動で調整したい場合は、OpenType+プロポーショナルメトリクス設定のセットが基本のようです。

…が、今回は「和文等幅」なのでこちらも割愛します(もっと勉強します…)。

参考)

超初心者のためのIllustrator文字ツメ入門(追記あり) #moji_for_webya | Suikolog

 

 


3. アキを挿入(左/上、右/下)
こちらはベタ組をそのまま活かしたいので「自動」を選択。

 

4. 文字組み

▼行末約物全角f:id:system-skiyaki:20160608204533p:plain

▼行末約物半角

f:id:system-skiyaki:20160608204528p:plain

「文字組み」の設定を効果的に見せるために、猫には英語(?)で鳴いていただきました。

行末約物全角では、選択行の最後を全角分だけ確保して、「NYA-NYA-」の「」前後のアキを狭くして調整しています(禁則がかかっているので、“)”だけ次の行に飛び出すことはありません)。今回はすっきりボックスの形をキープしておきたいので「行末約物半角」にしました。

 


5. 禁則処理

▼弱い禁則をかけた場合f:id:system-skiyaki:20160608133359p:plain

▼強い禁則をかけた場合f:id:system-skiyaki:20160608133404p:plain

見比べてみたらけっこう違ったので、少しでもベタ組感をキープできる「弱い禁則」を選択。

拗促音(「ゥ」「ー」など)なども対象に含めたい場合は「強い禁則」を。
http://www.dtp-transit.jp/adobe/illustrator/tutorial/post_1004.html

 

 

6. ぶら下がり

▼標準をかけた状態f:id:system-skiyaki:20160608211333p:plain

▼強制をかけた状態f:id:system-skiyaki:20160608211343p:plain

「標準」はテキストボックスの中に「。」が収まっていますが、「強制」は外に逃がす代わりに、ボックス内の本文の並びがなるべく均等になるように調整されています。

今回は、ページ全体に背景がガッツリ入ることが予想されるので、句読点などは外に逃がす「強制」を選ぶことにしました。

(わかりやすい効果を再現するために、文字組を「約物半角」に変えています)

※「ぶら下がり」は禁則処理が「なし」以外になっているときに使える設定です。

 


7. 欧文の前後のアキを調整
ここまで設定してきたところで、文中にたくさん入ってくる欧文の混ざり具合をチェック。分かりづらいので「」と背景の方眼をなくしたのがコチラ。

f:id:system-skiyaki:20160608212442p:plain

NYA-NYA-の前後が少し空いているのが気になります。

「文字組み」の中にある「文字組みアキ量設定」で自分好みに詰めてみることにしました。

f:id:system-skiyaki:20160608212622p:plain

 

f:id:system-skiyaki:20160608212802p:plain

オレンジ枠のところが欧文の前後のアキを調整する部分。

まずは「新規」ボタンを押して、任意の名前を入力。今回は「元とするセット」を「行末約物半角」にしたので「行末約物半角(欧文前後ツメ)」。ひねりなし。

 

そして、ウィンドウ上の「名前」が新規作成したものになっているのをチェックしたうえで、数値を(下げるときは低いものから順に)下げていきます。

設定したら「保存」→「OK」をクリック。

f:id:system-skiyaki:20160608213314p:plain

欧文の前後が少し狭くなりました。(今回は最小・最適を8%、最大を12.5%にしてみました)

 

新規作成したこのカスタマイズ設定を「文字組みアキ量設定」ウィンドウから「書き出し」も可能。

書き出しておくことで、別のファイルを開いたときにもお気に入りの設定を「読み込み」で呼び出すことが簡単にできます。

 

 

 

 

均等配置(最終行左揃え)

そして最後に、忘れずに段落の設定に「左揃えのジャスティファイ」を選択。

これを選び忘れると、欧文がたくさん入ったときにボックス内でテキストの最後がガタついてしまいます。

 

▼左揃えf:id:system-skiyaki:20160608214301p:plain

▼最終行左揃え

f:id:system-skiyaki:20160608214427p:plain

 

 

…“薄暗いじめじめした所で”、猫がカオス化したところで今回は完了に。

 

実際に本文を流し込んだ後に調整が必要になってくるかもしれませんが、
今回はこの設定を元に進めていきたいと思います。

 

最後に、名著に手を加えてしまってそうせき先生ごめんなさい。

買っただけで一文字も読めていない先生の本2冊、これを機にいい加減に読みますね。

毎日のタスク管理の記入がめんどくさいあなたへ!jsでMacのリマインダーに投稿してみた。

皆さん 初めまして

SKIYAKIでクリエイターをしています。 ダーヤマと申します。

皆さんはゴールデンウィークはどうお過ごしになられたでしょうか? 旅行に行った人いるかもしれません。 もしかしたら家でのんびり過ごした人もいると思います。

かくいう僕はシンガポールに行っていっていました。

そう常夏のアジア、シンガポールに!私は!行ってきましたよ!フィリピン経由でね!

f:id:system-skiyaki:20160508191214j:plain

きらめくアジアンガール、口からとめどなく水を出すマーライオン、異国のスパイスに酔いしれる。 そんなリア充めいた想像をしたと思います。

ただ私のどや顔を浮かべたあなたに、一つお知らせしたい。

シンガポールマーライオンのところで財布を海に流され、 携帯に至ってはもずくとなって消えました。。。! これが調子に乗りすぎる男の天罰か!

ということで、今日はMACjavascriptを操作して、 リマインダーに定期的な予定を登録してみたいと思います。

実はjavascriptMacがいじれるということは今まで知りませんでした。

そしてApple Scriptの存在もね!

YOSEMITEからの機能で、JXAと呼ばれています。

ググったら所以が出てきます。詳しくは参考をみてください。割愛します。

実行方法

実は色々な呼び出し方があります。

  • Script Editor f:id:system-skiyaki:20160508191407p:plain このアプリですね。 環境設定からApple Scriptか選べます。
  • Automator f:id:system-skiyaki:20160508191440p:plain ロケットランチャーを持ったロボットのこいつです。 登録しておけばアクションとして右クリック呼び出しできます。
  • コマンド
    みんな大好き黒い画面です。
    osascriptコマンドで実行できます。
     osascript -e console.log('hello') 
  • コマンド パート2
    パイプ*1から使用する。 あえてhelloを呼び出すと以下になります。

    echo "console.log('hello');" | osascript -l JavaScript
    *1パイプとは・・・・コマンドの標準出力を次のコマンドに渡す処理
  • コマンド パート3
    jsファイルから直接実行します。 デスクトップとかbash_profileとかなんかしとけば管理しやすそうですね。

以上の中から今回は、Script Editorを利用していきたいと思います。 では実際にリマインダーに追加していきたいと思います。

準備

まず変数やイベントについてですが、、、

なんだよ、マジわからないよというあなた、

安心してください。ちゃんとデフォでありますよ。 Script Editorから調べられます。

command + shift + o

です。今回だとリマインダーのアプリを選択します。

[f:id:system-skiyaki:20160508195016p:plain][f:id:system-skiyaki:20160508195016p:plain][f:id:system-skiyaki:20160508195016p:plain]

それらを参考に作成していきます。

最初にApplicationを使いアプリを呼び出します。

var app = Application(“Reminders”)

webでいうとIDを指定したところです。 次にリストに何があるのかを確認します。

var app = Application(“Reminders”)
app.lists.name()

リストの名前をこれで取得できます。

f:id:system-skiyaki:20160508193723p:plain

この時点で配列になってるので 例えば

var app = Application(“Reminders”)
var lists = app.lists.name()
lists[0]

このように変数にすれば中に格納されている配列を指定できます。

f:id:system-skiyaki:20160508193623p:plain

なっていないよ!っていう方は、以下を参考に配列にしてもらい使用してみてください。

f:id:system-skiyaki:20160508193651p:plain

var app = Application("Reminders")
lists = app.lists
list_arr = Array.apply(null,lists)
list_arr = list_arr.map(function(e){
    return e.name()
})
list_arr //=>[“〇〇”,“〇〇”,“〇〇”]

上記の解説をざっくりすると、

Array.applyはlistsの中身を分解して、配列を生成します。

mapは配列の中身に対して、コールバックして、name()を呼び出しています。

※ちなみにTODO本体を取得する際は、list[“〇〇”].remindersから同様の手順です。

リマインダに登録

ではリマインダーに登録してみましょう。

登録する際にはpush( entry )イベントを利用します。

var app = Application("Reminders")
entry = app.Reminder(  { name : "お腹が弛んだあなたに贈る腹筋リマインダー", body: "腹筋を300回する" } )
app.lists["毎日のタスク"].reminders.push( entry )

nameがタイトル、bodyが内容ですね。

for文などを使えば連続で数字を変えたりしながら登録ができます。 登録が完了するとScript Editorでは1が返ってきます。

f:id:system-skiyaki:20160508193413p:plain

そう、つまりこのリマインダーの流れは腹筋スレ。。。というわけです。嘘です。

以上になります。

自動化のハードルが下がりつつありますね本当に。 素敵。。。!

それでは私はお腹が弛んでるので腹筋したいと思います。 ではまたどこかで!

参考)

MAC Developer Library https://developer.apple.com/library/mac/releasenotes/InterapplicationCommunication/RN-JavaScriptForAutomation/Articles/Introduction.html#//apple_ref/doc/uid/TP40014508-CH111-SW1

・知らないうちにMacがシステム標準でJavaScriptで操作できるようになってた (JXA) http://qiita.com/zakuroishikuro/items/1b02378bf9e940602d87

・Javascrript for OSX Automation アドベントカレンダー http://takuya-1st.hatenablog.jp/entry/2014/12/01/000000

みだらな乱数の乱れ具合は?

皆様お元気ですか?

インフラ担当のhirakuriと申します。

自分では、

・怠惰(Laziness)

・短気(Impatience)

・傲慢(Hubris)

をすべて兼ね備えていると自負しておりますが、 怠惰がすぎるのかコードを書くのは苦手で、インフラを担当しております。 もちろんインフラは好きです。

できれば頭に思い描くだけで、ブログが完成しないかと強く希望しております!!

 

さて、私はこの世界に足を踏み入れていらい、 様々な言語で使用している乱数はどの程度お行儀よく乱れているのか気になっておりました。 気にはなっていましたが、めんどうなのでほっときました。 今回ブログを書く機会を得ましたので、rubyのrandを使って実験してみようと思います。

 

randを使って、サイコロの簡単なコードを書きました。

以下のようなコードです。 このコードを1回実行すると、サイコロを100回振ったことに相当します。

#! /usr/bin/env ruby

6.times do |i|
    var="@num#{i+1}" 
    eval("#{var} = 0") 
end

100.times do
    result = rand(1..6)
    eval("@num#{result} += 1")
end

6.times do |i|
    p "@num#{i+1}"
    puts eval("@num#{i+1}")
end


10回実行しました。
その結果をまとめると以下のようになりました。

1が出た回数 2が出た回数 3が出た回数 4が出た回数 5が出た回数 6が出た回数
1〜100回目試行 11 21 18 17 15 18
101〜200回目試行 15 12 16 23 14 20
201〜300回目試行 19 16 19 13 18 15
301〜400回目試行 12 15 22 20 15 16
401〜500回目試行 17 17 23 18 14 11
501〜600回目試行 9 17 18 18 20 18
601〜700回目試行 16 14 18 17 14 21
701〜800回目試行 14 16 19 8 22 21
801〜900回目試行 12 20 22 15 12 19
901〜1000回目試行 16 16 20 13 23 12
累計 141 164 195 162 167 171


結構偏りがあるような気がします。
実装がへぼいのでしょうか、それとも私の使い方が悪いのでしょうか?
それとも現実もこんな感じで、現実をリアルに実装してるのでしょうか?
今度、サイコロを実際に1000回振ってみよう!

愛のあるレタッチをしよう

すいませんこんばんわ!クリエイターチームのしがです。主な業務はサイトを運用するために画像をつくったり、サイトデザインしたりコーディングしたりしてます。

同じようなお仕事をされている方は、「肌キレイにして!」などのレタッチの指示がくることが多いかと思いますが、さてどんなやり方がいいのかなぁ?とググったことはありませんか?私はあります!

そこで、今回は私的な写真レタッチのやり方について書こうかと思います。
さっそくいい感じの素材を見つけました。

f:id:system-skiyaki:20160330193711j:plain

写真ACさんより(いつもお世話になっております)
http://www.photo-ac.com/
レタッチにピッタリじゃないですか〜これで説明していこうと思います。

 

〜ハイパスとぼかし(ガウス)をつかっていい感じにレタッチする〜
使用ソフト:photoshopCC

まず完成形がコチラです。

f:id:system-skiyaki:20160331193214j:plain

コツコツ地味に15分くらいでやりました。

 

準備その1:レイヤーを複製する

f:id:system-skiyaki:20160331194000j:plain

 

準備その2:フィルタ〜をかける

f:id:system-skiyaki:20160331195035j:plain

まず「ぼかし」とつけたレイヤーにフィルター→ぼかし(ガウス)をかけます。
なんとなく「これくらい綺麗になったらいいな〜」くらいの値をいれるといい感じになります。
この時、入れたぼかしの値を覚えておきましょう!

f:id:system-skiyaki:20160331195221j:plain

続いて「ハイパス」とつけたレイヤーにフィルター→ハイパスをかけます。
半径は先ほどかけたぼかしの値と同じにします。

 

こんな灰色のままだとレタッチできないので、レイヤーの設定をいじります。

準備その3:レイヤーの設定をかえる

f:id:system-skiyaki:20160331200742j:plain

ハイパス効果をかけたレイヤーを

モード:リニアライト
不透明度:50%

に設定します。すると…

f:id:system-skiyaki:20160331200917j:plain

こうなります!!見た目は変わってなくてOKです。


リニアライトの効果は画像の明るさに応じて下のレイヤーの光の加減を調節してくれる効果があります。(参考元:Adobe Photoshop * 描画モード
ハイパスはぼかしとは逆の効果のフィルターです(参考元:Adobe Photoshop * フィルター効果リファレンス

 

ぼかし(ガウス)をかけ、不透明度で調整してレタッチする方法もありますが、今回ご紹介したやり方をつかうと元の写真の明暗を良い感じに残しながら、より自然にレタッチできるのでおすすめです。

 

これで準備が整ったので、ここからコツコツレタッチしていきます!

レタッチその1:レイヤーマスクで肌をキレイにしていく

f:id:system-skiyaki:20160331202811j:plain

ハイパスフィルターをかけたレイヤーに、レイヤーマスクをかけます。
f:id:system-skiyaki:20160401192131j:plain

ブラシツールで、色を黒にしてキレイにしたいところをなぞってみました。
ぼかしをかけたレイヤーが見えていい感じにきれいになっています!

f:id:system-skiyaki:20160401192423j:plain
ガンガン黒で塗っていきましょう。
自動選択ツールなどで肌を選択し、黒で塗りつぶすっていうテもありです。
ここで私は調子に乗って塗りすぎてしまいましたので、ここからまた調整します。

f:id:system-skiyaki:20160401192653j:plainレイヤーマスクのいいところってやり直しが効くところですよね〜
ということで、ブラシツールの色をグレーや白にして自然な肌の調子になるように調整していきます。

f:id:system-skiyaki:20160401193117j:plain
一通り調整したところです。

今回は、さらにキレイになるように、もうすこしだけ手を加えていこうとおもいます!

レタッチその2:ニキビを消す

ハイパスフィルターとぼかしでは消しきれなかったニキビを消していきます。
f:id:system-skiyaki:20160401193446j:plain
肩のところが若干気になります。

f:id:system-skiyaki:20160401193907j:plain

スポット修復ブラシツールでなぞっていきます。

ついついお顔のニキビのほうが気になってきますが、体のほうも少しだけ気を配るとよりキレイになります!
スポット修復ブラシツールでなぞるだけでみるみるうちにニキビが消えていきます。実際もそうだといいのに…

f:id:system-skiyaki:20160401194045j:plain

はい消えました。

レタッチその3:隈も消しておく

スポット修復ブラシツールを使ってるので、ついでに隈やお肌のでこぼこも消しておきます。ツールを修復ブラシツールに切り替えて、キレイな肌をコピー元にし、隈やでこぼこのところをなぞっていきます。

f:id:system-skiyaki:20160401195645j:plain

ブラックジャックの顔半分はお友達のキレイな皮膚。ということを思い出しながらなぞっていきます。

 

レタッチその4:手を見逃しがちなのでキレイにする

手って年齢がでやすいといいますので、この女性の手もキレイにしていきます。

f:id:system-skiyaki:20160401200255j:plain
これも修復ブラシツールでさくさく直していきます。

f:id:system-skiyaki:20160401200541j:plain

f:id:system-skiyaki:20160401200542j:plain
デザイナーって華やかな職業にみえますけど実際はこういう地味な作業の繰り返しなんですよね…。嫌じゃないんですけど!画が代わり映えしないブログですいません!出来上がったらキレイになります。

ここまでのコツは、キレイにしたい!という優しい気持ちで作業することです。
モデルに愛情を注げばその分キレイになるはず……

レタッチその5:白目をきれいにする

なんか最近若い人を見ると目が輝いているんですよね。いつから自分はこうなってしまったんだろう。
この写真の女性の場合、ちょっと血走ってたので抑えます…。

f:id:system-skiyaki:20160401201020j:plainスポット修復ブラシツールや修復ブラシツールではコピー元の情報が少ないため、普通のブラシツール&スポイトでコツコツ塗っていきます。
ところでツムツムをしていると、キャラクターたちの目がいっぱいあるのが急に怖くなります。私だけですかね…?

そんなことを心のなかで思ってるうちに完成です!

f:id:system-skiyaki:20160331193214j:plain
できた〜

ちょっとした一手間で、いつものレタッチもいつもよりキレイになるとおもいます!
この記事がきっかけでなにか皆さんに素敵なアイディアが生まれますように…
まとめ下手くそですいません!!

 

sinatraを使ってtumblr API を叩いて画像を投稿してみる

こんにちは、エンジニアの kouno です。 大本営から春イベントは総力戦になるとの発表があったので、戦々恐々しながら戦力の増強と備蓄を本格的に始めたところです。

今回は、sinatraを使ったwebアプリからtumblrAPIを使って画像を投稿してみようと思います。

前提

  • tumblrのアカウントを持っている事

環境

インストール

$ gem install sinatra
$ gem install tumblr_client
$ gem install thin

tumblrの準備

  1. tumblrにログイン
  2. https://www.tumblr.com/oauth/apps にてアプリを追加し、consumer_keyとconsumer_secretを取得
  3. https://api.tumblr.com/console/calls/user/info に上記で取得した、consumer_keyとconsumer_secretを使って、oauth_tokenとoauth_token_secretを取得

実装

[config.ru]
require 'sinatra'
require 'tumblr_client'
require 'mime/types'
load  'myapp.rb'

configure do
  set (:client) {
    Tumblr::Client.new({
      :consumer_key => '#{your_consumer_key}',
      :consumer_secret => '#{your_consumer_secret}',
      :oauth_token => '#{your_oauth_token}',
      :oauth_token_secret => '#{your_oauth_token_secret}'
    })
  }
end

run Sinatra::Application
[myapp.rb]
get '/' do
  erb :index, :layout => :application
end

post '/tumblr_post' do
  if settings.client?
    client = settings.client
    post_option = {}

    %w(data caption tags link state).each do |column|
      post_option[column.to_sym] = params[column]
    end
    
    if File.directory?(params[:data])
      path = params[:data]
      Dir.open(path).each do |file|
        next if MIME::Types.type_for(file) == [] or File.directory?(file)
        post_option[:data] = "#{path}#{file}"
        post_option.delete("data")
        post_option.delete(:type)
        client.photo("#{client.info["user"]["name"]}.tumblr.com",post_option)
      end
    else
      client.photo("#{client.info["user"]["name"]}.tumblr.com",post_option)
    end

    # puts response
    erb :tumblr_post, :layout => :application
  end
end
[views/index.erb]
<form action='./tumblr_post' method='post'>
        画像パス<input type="text" name="data" size=" 100" />※ローカルファイルのフルパスを設定<br />
        タイトル<input type="text" name="caption" size="100" /><br />
        url<input type="text" name="link" size="100" /><br />
        tags<input type="text" name="tags" size="100" /><br />
        ステータス<select name="state">
            <option value="draft">draft</option>
            <option value="queued">queued</option>
            <option value="published">published</option>
        </select>
        <input type="submit" name="submit" value="送信" />
</form>
[views/application.erb]
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
</head>
<body>
    <%= yield %>
</body>
</html>
[views/application.erb]
<p>送信完了しました。</p>

使い方

  1. $ thin start して起動してください。
  2. localhost:3000 にブラウザでアクセス
  3. 画像パスtumblrに投稿したい画像か画像のあるディレクトリをフルパスで指定
  4. タイトル に画像のキャプションをurlにリンクを、tagsにカンマ区切りで投稿に付けるタグを、それぞれ設定
  5. ステータスdraft(下書き),queued(自動投稿),published(即時投稿) のいずれかを設定
  6. 送信をクリック
  7. 画像が投稿されます

注意事項的な何か

  • thinの設定次第では送信後に画面がタイムアウトします。thinの設定をさがしてみてください。

参考URL

名前 url
tumblr API開発者向けドキュメント https://www.tumblr.com/docs/en/api/v2
tumblr本家git https://github.com/tumblr/tumblr_client
sinatra日本語ドキュメント http://www.sinatrarb.com/intro-ja.html

Google Chart Toolsでグラフをつくる

SKIYAKIでエンジニアをしているtsukidaです。主にフロントエンド周りの業務を担当してます
弊社で開発しているプラットホームの管理画面にグラフを追加した際に
Google Chart Tools を使用したのでご紹介したいと思います。

Google Chart Toolsとは

Google Chart Tools とはgoogleが無料で提供しているグラフ描画APIです。
グラフの種類も豊富で、カスタマイズ性も高いのが特徴です。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
        // グラフを描画するためのパッケージ(corechart)の呼び出し--------------①
        google.charts.load('current', {'packages':['corechart']});

        // コールバック--------------②
        google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        // データの作成--------------③
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'アイスの種類');
        data.addColumn('number', '売上数');
        data.addRows([
          ['バニラ', 3],
          ['チョコ', 5],
          ['ストロベリー', 1],
          ['抹茶', 2]
        ]);

        // グラフの描画--------------④
        var options = {'title':'今日のアイスの売り上げの内訳',
          'width':400,
          'height':300};

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>
①パッケージの呼び出し
google.charts.load('current', {'packages':['corechart']});

チャートを読み込むためにパッケージの呼び出しを行います。
パッケージの種類は使いたいグラフによって変更したり増やしたりできます。
今回は円グラフを作成するのでcorechartを呼び出します。


③データの作成
var data = new google.visualization.DataTable();
			data.addColumn('string', 'アイスの種類');
			data.addColumn('number', '売上数');
			data.addRows([
				['バニラ', 3],
				['チョコ', 5],
				['ストロベリー', 1],
				['抹茶', 2]
			]);

addColumnの第一引数にデータの型を、第二引数にラベルを、
addRowsでデータの中身を指定します。


④グラフの描画
var options = {'title':'今日のアイスの売り上げの内訳',
				'width':400,
				'height':300};
				
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

グラフを描画する際、装飾等をオプションで指定できます。
ここではtitleとグラフの幅と高さを指定していますが、
他にもグラフの色やラベルの位置等かなり自由にカスタマイズできます

⑤\完成/

f:id:system-skiyaki:20160324171846p:plain

参考サイト