A Day In The Boy's Life -70ページ目

A Day In The Boy's Life

とあるエンジニアのとある1日のつぶやき。

社会人になって色々学ぶことは多いですが、多くは社会に出て学べることが多かったりします。

先輩が手取り足取り教えてくれなくとも、怒られながらも経験を通して学べることが多かったりもするんですが、そういった教わること、年月を重ねれば学べて行くことではなく、誰も教えてくれないんだけどこの技能があればもっと仕事がしやすかったのになぁ、って思うものがあります。


その一つが絵心

幼い頃は誰しも絵を書いたりもしていて、うまい下手はあるものの、そのうち才能の有無を個人の中で識別してしまい、学ぶ場としては学校の美術の時間ぐらい。

ただ、それも風景画を描いたり版画をやってみたりと、その道に進もうとする人以外は大して興味の対象にもならないものだったりもします。

ところが、そんな絵を書く作業や美的センスというものも社会人の中では求められる技能の一つだったりもします。



人をひきつける資料、人を魅了する色彩


その一つが、資料を書くという作業。

ホワイトカラーな仕事をする人にとっては、プレゼン用の資料を書くという場面は少なくありません。

資料は、必要な情報を詰め込むという作業にはなりますが、それは何も文字だけではありません。

他人にとって情報を伝えやすくするには、文字だけより絵や図を盛り込んで視覚に訴えかけた方がわかりやすいものだったりします。


ところが、そんな絵を書く作業というものは社会に出てからは学びません。

資料作りがうまく、わかりやすい絵を差し込んでる人でも一から絵を描いているわけではありませんけど、どんな絵を差し込めば読み手や聞き手をひきつけるのかというものは、わかって意図的にそうしていたりします。

センスのよい絵を差し込んだところで、資料というのはその絵だけで決まるものでもなく、資料全体の構図のバランスによって良し悪しが決まってきます。


そんな美的センスが求められれたりするわけですが、資料をレビューする側も相手に伝える目的や資料の構成とかは意見を出すものの、配色や用いている絵や図のセンスまで細かく指定してきません

まぁ、少なくともPowerPointで図を描いたときのデフォルトのエメラルドグリーンを用いてたときは、さすがにもうちょっと図をどうにかしてって思ったりもするんですが、だからといってここは基本色をこの色にしてサブカラーをこの2つにすれば資料がもう少しシャープに収まるとか、そんなことをいちいち伝えてたら、自分が作った方が早いってことにもなったりするわけですし、そのセンスも含めて作り手の仕事だよって部分もあるわけです。


サイトデザインの提案をする資料であれば、そこにはサイトイメージが貼り付けられてたりもしますが、それを作るのは専門のデザイナーさんだったりもして、それはテーマとかからイメージカラーをちゃんと決めた上で作り上げたものです。

提案書自体はその絵をうまく活かしたものにしなくてはなりませんし、バランスを崩して資料がそのよさを打ち消すようなことになっては元も子もないわけです。



相手の視覚に溶け込む絵


要件がまだはっきり決まってなく、とりあえずこんなことをしたいよってヒアリングをする場でも、絵がうまく書ければ事がスムーズに運ぶことが多々あります。

私の場合は、システムエンジニアとしてサイトのイメージを引き出すときに、その場で絵を描いてイメージを共有したりするんですが、もっと具体的で視覚的にわかりやすい絵が描ければなぁ、と思うことはよくあります。

デザイナーさんと仕事をすると、それを言葉にするのがとても難しいものでもノートにササっと図を描いてみたりして、サイトの構図や操作方法のイメージから業務運用の関係図などもわかりやすくまとめてて、そんな姿とその技能がとてもうらやましく感じるものです。


こういったことは、絵を書く上でのコツを抑えればある程度のレベルのものは絵が得たりもするんでしょうけど、学生の頃に美術で教わる技能が、まさか社会人になって必要になるとは思っても無かったわけです。

それは、画家など一部の才能を開花させた人にとって必要なもの、もしくは趣味の世界として自分の個性を発揮する場として必要なもので、とてもその道を目指さなかったり興味を持ってない人にとってはそれを使うことは無かろうと思ってたりもしてました。

言葉にするのが下手であったり、言葉でうまく言い表せない情報を上手に相手に伝える際に絵というものは有用で、それはコミュニケーションスキルを補うものとしては、当時は気づきもしませんでした。



絵心や美的センスを鍛える方法


一番手っ取り早いのはセンスのある資料を読み漁ってまねしてみることでしょうか。

営業をしている人であれば、他の営業さんの提案資料が共有されてたりもするでしょうから、それを読み漁ったりテンプレートにしてみるのが一番近道だと思います。

プレゼンが例えつまらなくても(おい)、その資料のレイアウトや配色、使われている絵とかに注目してみたら違った視点で学べることも多々あるかもしれません。


資料だけでなく、サイト作りに活かしたいのであれば色使いや構図が気になったウェブサイトをじっくり見てみるのもいいでしょう。

そこにある色使いのテーマや意味を理解してみれば、その才能が開花するということは無くとも、近いようなセンスは身につけられます。

こういうのって才能じゃないのって個人的に思ってたりもしたんですけど、色使いでもきちんとしたテーマだとか、相手によって受け入れやすいもの、受け入れにくいものがあったり、コツというものが存在するんだなとわかったりもします。


また、ツールに頼ってみることもよいかもしれません。

高い値段の画像ソフトを買うということでなくとも(むしろいきなり買っても使いこなせませんけど)、無料でしかもクォリティの高い図が探せたり、描くのに手間がかかるようなセンスあふれる図を簡単にかけるWebサービスもあったりもします。

クオリティの高い図を並べればクオリティの高い資料が出来上がるわけではありませんが、自分では到底描けないようなものが手軽に手に入るので、余計な手間を煩うことなくあとはそれをどう活かすかって点に注力できます


こういうセンスって才能だし私は絵心や美的センスが無いからダメだとか、自分はエンジニアだから資料を書くことは仕事じゃない、ってそこから逃げ出さず取り組んでみた方が仕事の仕方もだいぶ変わってくると思います。

言葉だけで相手に正確な情報を伝える事って相当大変なわけで、それを補ってくれるものとして前向きにトライしていくのがよいのではないでしょうか。




謎解きはディナーのあとで/東川 篤哉
¥1,575
Amazon.co.jp

正直、推理小説自体をほとんど読んだことがないのです。

その前に何読んだの?って言われると、もしかしたら小学校辺りに読んだ(であろう)シャーロックホームズとかまで行き着くかもしれない・・・。


で、ひょんなことからこの「謎解きはディナーのあとで」を読むこととなったんですが、そんな私でもすんなり読み込める内容。

展開の基本線が決まっていて、ご令嬢でもあり警察官でもある主人公が担当する事件に悩まされながら帰宅して、執事に打ち明けてみるとその話だけから見事犯人を推理してしまうというもの。

主人公の話を詳細に聞いただけで謎を解いてしまう、どちらかというと執事が美味しいところを持っていくという展開。

ドラマではよくある凸凹コンビが読んでて頭をよぎります。


ただ、そんな初心者の自分でも若干物足りなさもあって、それは犯人の犯行動機とかがほとんど語られていない点。

火曜サスペンスとか見てみると謎解きの次に重要で、波打ちつける崖の上でクライマックスを迎える動機の告白がほとんど描かれることがないわけです。

なので、なんで殺人事件起したの?ってところがもやもやとしたまんま。

でも、この辺を語りだすと登場人物が増えたり、背後関係が複雑・詳細に語られだして自分には向いてないものになっていたのかも。


まぁ、この辺はタイトルの通り謎解きがディナーのあとで完結するため、ということなのかもしれません。

さすがに動機の真実を実際に推理の段階でかたることは出来ませんし、そこを語るとしたらディナーの席では謎解きは終わりませんからね。



目次


第一話 殺人現場では靴をお脱ぎください

第二話 殺しのワインはいかがでしょう

第三話 綺麗な薔薇には殺意がございます

第四話 花嫁は密室の中でございます

第五話 二股にはお気をつけください

第六話 死者からの伝言をどうぞ



アメブロでSyntaxHighlighterを使ってみる 」の続き。


最後の方に書いたんですが、アメブロでHTMLの編集モードを使ったらタグが補正されたりして、それが原因でIEだと見栄えが崩れることが多かったりしたので、使うことに多少躊躇があったんですがググってみたら、似たような問題が指摘されてたりしました。


ブログ上でプログラムソースを表示する方法③ IEでの表示エラーを直す @ 今日のPython


問題としては、IEではソースコードの表示時に最後の1行が隠れて見えなくなるというもの。

CSSを編集すれば改善できるとの事だったので、よしやってみるか!って思ったけどよく考えたら前回のSyntaxHighlighter設置方法はホスティングバージョンを使うものなので、CSS編集できないじゃん・・・。

ってことで、Google code上に直接ソースをホストしてそれを参照するような構成に変更することにしました。



SyntaxHighlighterをGoogle code上にホストする


まず、SyntaxHighlighterの最新バージョンをダウンロードして、CSSを編集します。

先のブログに書いてたようにCSSを編集するんですが、私の環境の場合はshCore.cssを編集しました。


.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  overflow-y: hidden !important;  /* Add */
  font-size: 1em !important;
  padding: 5px 0 5px 0 !important; /* Add */
}

.syntaxhighlighter.ie {
font-size: .9em !important;
/* padding: 1px 0 1px 0 !important; */
padding: 3px 0 20px 0 !important;
}

.syntaxhighlighterクラスのpaddingを追加しているのは、多少ソースの表示が窮屈に見えたからですので、お好みでどうぞ。

また、「overflow-y: hidden !important;」の部分は、縦のスクロールバーを消すためのものです。


編集が完了したら、Google code上に編集したCSSと本体のJavaScriptファイルを追加します。

ちなみに、SyntaxHighlighterで必要なファイルは「scripts」と「styles」ディレクトリのみです。

ダウンロードしたファイルに含まれる、上記以外のディレクトリやファイルは削除しておいて問題ありません。


svn add syntaxhighlighter

上記で追加しているディレクトリが、SyntaxHighlighterのソースコードのディレクトリです。

これで、Google codeからSyntaxHighlighterを使えるようになった、と思ってたんですが「Google Code上にホストしたCSSが適用されない問題の回避方法 」に書いたように、このままだと追加したCSSがCSSファイルとして認識してくれません。

なので、ここで書いたようにMIMEタイプを指定しておく必要があります。



Google code上からSyntaxHighlighterのコードを参照する


AmebloのフリープラグインのJavaScriptをGoogle codeにホストしたよ 」に書いたように、アメブロのフリープラグインから呼び出すGoogle code上のJavaScriptファイルを編集します。

前回の「アメブロでSyntaxHighlighterを使ってみる 」では、ホスティングしているものをさらに呼び出すようにしていましたが、今回はGoogle code上のSyntaxHighlighterをロードするように変更しています。


  var google_code_url = "https://YourID.googlecode.com/svn/trunk/syntaxhighlighter/";
  $("head").append('<link rel="stylesheet" href="' + google_code_url + 'styles/shThemeRDark.css" type="text/css" />');
  $("head").append('<link rel="stylesheet" href="' + google_code_url + 'styles/shCore.css" type="text/css" />');

  $.getScript(google_code_url + "scripts/shCore.js", function() {
  $.getScript(google_code_url + "scripts/shAutoloader.js", function() {
    function path() {
        var args = arguments,
        result = [];
        for (var i = 0; i < args.length; i++)
          result.push(args[i].replace('@', google_code_url + 'scripts/'));
          return result
      };
      SyntaxHighlighter.autoloader.apply(null, path(
        'applescript            @shBrushAppleScript.js',
        'actionscript3 as3      @shBrushAS3.js',
        'bash shell             @shBrushBash.js',
        'coldfusion cf          @shBrushColdFusion.js',
        'cpp c                  @shBrushCpp.js',
        'c# c-sharp csharp      @shBrushCSharp.js',
        'css                    @shBrushCss.js',
        'delphi pascal          @shBrushDelphi.js',
        'diff patch pas         @shBrushDiff.js',
        'erl erlang             @shBrushErlang.js',
        'groovy                 @shBrushGroovy.js',
        'java                   @shBrushJava.js',
        'jfx javafx             @shBrushJavaFX.js',
        'js jscript javascript  @shBrushJScript.js',
        'perl pl                @shBrushPerl.js',
        'php                    @shBrushPhp.js',
        'text plain             @shBrushPlain.js',
        'py python              @shBrushPython.js',
        'ruby rails ror rb      @shBrushRuby.js',
        'sass scss              @shBrushSass.js',
        'scala                  @shBrushScala.js',
        'sql                    @shBrushSql.js',
        'xml xhtml xslt html    @shBrushXml.js'
       ));
       SyntaxHighlighter.all();
    });
  });


一行目のGoogle codeのリポジトリへのURLは自身のIDのものに置き換えてください。

あとは、アメブロのフリープラグインからGoogle code上の上記JavaScriptファイルをロードしておけばSyntaxHighlighterが利用できるようになります。


<script type="text/javascript" src="https://YourID.googlecode.com/svn/trunk/YourJS.js"></script>

これで、確かにIEでも最後の一行が見えなくなるという不具合は解消されました。

ただ、一行だけのコードを書くと2行分のスペースが空いてしまう・・・。

なぜか横スクロールが表示されるぐらい長いコードを書くと綺麗に一行分だけ表示されるんですがね・・・。