第9回ライトニングトーク大会を開催してみた

こんにちわ。
リエです。
 
最近ミニチュアクッキング動画にハマっています。
https://matome.naver.jp/odai/2143377587420163301
 
音楽とかなくて、料理の音や動作音だけが響く動画なんですが、なんか癒されるのです。
 
先日第9回ライトニングトーク大会(以下、LT大会)を開催しました。
過去のLT大会の記事は下記リンクからご確認いただけますヽ(^o^)丿
第1回目
第2回目
第4回目
第5回目
第6回目
第7回目
第8回目
※第3回目の記事はありません。
 
2015年から続けてきたLT大会も今回で9回目。
ルールはいつもと同じで、持ち時間は1人5分、テーマは自由で実施しました。
テーマは自由なので、趣味の話や仕事に関係のある専門的な話など内容はさまざま。
 
わたしは、自分が携帯を持ち始めた時(当時はまだガラケーでした)から現在のスマホまでの思い出話をしました。
スマホを持ち始めて数年経つのですが、その前に持っていたガラケーはまだ手元にあります。
その中には懐かしい写メも入っており、たまに見返すのですが、それで今回のLTのネタはこれにしようと思いつきました。
 
今回は時間オーバーになった人もいましたが、みんなの個性が出たおもしろい内容のものが多かったです。
最後に自分がいいと思った人に投票し、優勝者が決まりました。
 
優勝者には毎度恒例の優勝カップの授与(ノ´∀`*)

 
この記事を書いてて、まだトロフィーリボン作ってないことに気づきました。
早く作って優勝カップにつけなきゃε≡≡ヘ( ´Д`)ノ
※この記事作成後にトロフィーリボンを作って優勝カップにつけました🎀


スマホ、Outlook対応!HTMLメールのボタンの作り方


HTMLメールを作ったけど、PC、スマホ両方対応しようとすると「ボタンを画像で作ったから大きすぎる、小さすぎる…。」などといった経験はないでしょうか?
「HTMLメールだから仕方がない…。」と画像で進めるのもありですが、ソースコードのみで対応できる方法がありますのでご紹介します。

 

「padding」を使えたら一番楽ですが、下記のように古いOutlookの場合、aタグに「padding」が対応していないようです。(代わりにborderを使おうと思ったのですが、10px程度までしか太くなりません…。)

The Ultimate Guide to CSS
https://www.campaignmonitor.com/css/
(「!」マークにツールチップで「Padding for p, div and a tags is not supported」と表示されます)

 

そのため、Outlook用のハックを利用します。





  
    Googleにリンク
  



「<!– [if gte mso 9]>〜<![endif]–>」とは、「Outlook 2000(Version 9以上)」のみ読み込むというハックです。
※以前ご紹介しました、スマホでもPCでも読みやすい!HTMLメールのフォントサイズを参照

 

その中に書かれている「<v:roundrect>」「<w:anchorlock/>」「<center>」はVMLタグらしく、そのタグで図形を描画しているようです。
なんだかややこしそう…と思っていたら、下記のジェネレータがありました。

 

Bulletproof email buttons
https://buttons.cm/

このジェネレーターでボタンを作成すると、Outlookにも対応した形でコードが生成されます。Outlook用のボタンは、幅と高さは固定されてしまうので、文字の量等に対応した調整はその都度必要です。

 

簡単なご紹介となりましたが、HTMLメールでボタンを作る際に参考になれば幸いです!

 


文章チェックで大事なこと

こんにちわ。
リエです。
 
今回は文章チェックのお話をしたいと思います。
 
お仕事でマニュアルなどの文章チェックをすることが多いのですが、どれだけ気をつけていても誤字脱字って起こってしまいます。

 
そこで校正チェックフローを作成したいなと思い、どんな方法が最適なのか調べてみました。
ちなみに今までは、以下の方法で確認をしていました。
1.文章をまず読み込む
2.誤字脱字の確認
3.文法の確認
4.修正
5.再度読む込む
※1〜5は複数回繰り返します
 
調べてみると誤字脱字の種類は大きくわけて『語彙のミス』『文法のミス』『文章作法のミス』と、この3つに分類されるそうです。
なのでこの3つを徹底してつぶせば、正しい文章ができあがるというわけです。
 
そして文章確認で大事なのは、必ず間違いがあると思って読むこと。
未完成のものとして見なければミスは見つけられません。
ミスを見つけるコツは、以下の通りのものがあります。
 
1.文字は単語で見ない
人間の脳は、知っている言葉を補完して読むという仕組みを持っています。
めちゃくちゃな文章でも、意味を通じる文章に置き換えて読んでしまうのです。(怖い
文章チェックをする時は、脳内補完が起こらないように、文章を単語毎で読むのではなく、1文字1文字しっかりと確認して読まなければいけません。
 
2.数字に焦点を絞る
数字の誤字脱字が発生してしまうと、大問題です。
金額や日付や曜日などは特に注意して確認する必要があります。
 
3.漢字の送り仮名に焦点を絞る
漢字の送り仮名も、非常に間違えやすい&脳内補完が起こりやすいため、しっかりと意識して文章を読まないとミスを見落としてしまいます。
 
4.分節を区切って読む
文節を区切って読むことで、脳内補完をしてしまうミスを防ぎます。
 
5.黙読ではなく音読する
一語一語しっかりと声を出して読むと、かなりの確立でミスを発見することができます。
 
6.複数人でチェックをする
人によって、見る箇所が違っていたり誤字脱字のチェック箇所の得意・不得意があるので、複数人でのチェックは必須です。
 
 
この内容を踏まえ、フローを作成し社内で共有しました!
これで脱!誤字脱字だぜ\(^o^)/
 


デザインパターンとアハ体験

専門学校の時に初めてプログラミングに触れて、ある程度自分の作りたいものが作れるようになったぐらいの時期に、デザインパターンの触りだけ授業で知る機会がありました。

 

そこで出会ったのがデザインパターンの1つである
Singleton(シングルトン)パターン

 

簡単に説明すると
「classから作られるインスタンスが必ず1つだけと保証できる作り方の考え方」

 

学生時はこのパターンを知るまでアクセス修飾子であるpublicとprivateを分ける意味がただ単にそういうものという認識でした・・・が、このSingletonを学ぶことでprivate修飾子を使う意味を初めて理解できた気がします。

 

[簡単なシングルトンパターンのコード例]

 

そこからデザインパターンを自分でも色々調べて、その度に今まで作っていたやり方はこうゆうパターンだったのか・・や、こんな考え方もあったのかと色々とアハ体験を経験した気がします!

 

デザインパターンがプログラミングをするのに必須というわけではないですし、なんでもかんでもデザインパターンというわけでもないですが、考え方を学ぶことで広がる世界や知っているもの同士の共通言語フレームワークやライブラリの中を調べる時の糸口になったりならなかったりと、そういったものがあることだけでも知っていれば少しは役に立つ・・・かも?

 

プログラミングをはじめてからある程度自分で作れるようになった人は興味があれば一度調べてみると面白いかもしれません。

ちなみに当時の私は面白かったです!


デザイナーもそろそろVimっていいんじゃない?

 

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

「Vim」というエディターをご存知でしょうか?
エンジニアさんがよく使ってる印象がある「高機能」「爆速」で有名なエディターです。
ただ使い方が独特で慣れるまでに時間がかかることで有名です。

 

私も元々はSublime Txt等のエディターを使っていたのですが、GUIが利用できない場面が増えてきてVimに手を出し始めました。

 

Vimはターミナル上で起動するエディターなので、一度覚えてしまえばgitの更新やリモートファイルへのアップロード、リモートサーバへのアクセス〜編集まで、ターミナル上でそのまま作業を続けることができます。

 

要するに作業環境はターミナルだけで良くなるわけです。

 

私もVimにある程度慣れてきたらすごい快適に感じるようになりました。

 

最近ではVagrantなどの仮想環境内での作業、gulpやSassのインストールなどでデザイナーでもターミナルを利用する機会が多くなってきました。
これを機にvimに乗り換えてみてもいいんじゃないでしょうか。

 

ということで本記事では、Vimの良さと利用方法を少しばかり語りたいなぁと思います。

 

Vimを使うメリットとデメリット

 

メリット
・リファレンスが膨大(ググればすぐに記事が見つかります)
・プラグインが豊富なので、自分好みにカスタマイズできる
・設定は使い回しできるので、どんな環境でもすぐに再現できる
(新しいサーバ環境でもエンジニアさんが大概Vim入れてます)
・UNIX(LINUX)コマンドにも慣れることができる

 

デメリット
・操作になれるまでに1ヶ月ぐらいは見ておいた方が良い
・CUI環境での利用を前提としたエディターなので、キーボードのみで操作するためマウスで広範囲のコピペなどができない
・設定やプラグインのインストールの作法に若干慣れが必要

 

個人的に特に便利だと思うのが、設定です!
設定は「vimrc」というファイルを作成して、その中に記述するのですが、一度設定ができてしまえば、どんな環境でも「vimrc」ファイルを作成して、内容をコピペするだけ!
これだけでいつもと同じ使い勝手を再現できます。

 

まずはUNIXコマンドのおさらい

 

cd ディレクトリの移動
ls ディレクトリ内のファイル一覧
pwd 現在のディレクトリのパスを表示
mkdir フォルダーの作成
~ ホームディレクトリに移動

最低限これぐらいで問題ないかなと思います。

 

Vimの起動方法

macだと初めからVimがインストールされているので、デスクトップにHTMLを作成するなら

cd ~/DeskTop/でディレクトリを移動して

vim hoge.html
これだけでOK。
homebrewで管理したい方はこちらを参考にするといいかも。
http://qiita.com/one-a/items/5039dd266b90e18a4242

 

Vimの3つのモード

 

 Normal Mode  コマンド入力モード
 Insert Mode  テキスト入力モード
 Visual Mode  テキスト選択モード

 

Vimで一番戸惑うのは、この3つのモードの存在ですかね。
起動するとまずは「Normal Mode」で始まります。

 

この状態では、テキストの編集はできません。
できることは「カーソルの移動」「テキストのコピペ」「他モードへの移行」「検索」「保存/終了」などを行います。
テキストを編集したら常にこのモードに戻ります。

 

次に「Insert Mode」。「Normal Mode」でカーソルを移動し、「a」または「i」キーでテキストを編集することができます。
編集が終了したら「ESC」または「ctrl + [」などで解除できます。

 

最後に「Visual Mode」。こちらはテキストを選択するモードになります。
単語単位ぐらいであればマウスで選択範囲を作ってコピーできますが、一行コピーや範囲選択などで利用します。
(※マウスで範囲選択をすると行番号や不可視文字など不必要なテキストも含まれてしまいます)

 

使い方は「Normal Mode」でカーソルを移動し、「v」キーを押下します。あとはカーソルを移動すれば選択範囲が広がります。また「V」キー(shift + v)なら行単位で範囲が広がります。

 

戸惑うのはカーソルの動かし方

 

 h  カーソルを左に移動
 j  カーソルを下に移動
 k  カーソルを上に移動
 l  カーソルを右に移動

 

こちらに慣れた方が打ち込むスピードは速くなると思いますが、私は十字キーを使ってます(*´Д`)
ぶっちゃけ十字キーでも問題ないようにも思ったり。。好きに使っていいんじゃないでしょうかw

 

最後に、保存と画面の終了の仕方を

「Normal Mode」で「:」を押下すると、画面最下段にコマンドが表示されます。
この状態で「w」キーで保存。「q」で終了。「q!」で強制終了です。
同時に使うこともできます。「wq」なら保存して終了になります。簡単ですね!

最低限これぐらいを理解すれば、そこまで戸惑うことなくvimを操作できるかなと思います。

 

Vimのコマンドのおさらい

 

※コマンドはNormal Modeで使います

 i  カーソルの場所でInsert Modeに切り替え
 a カーソルの場所から1文字後ろでInsert Modeに切り替え
 x  カーソルの場所の文字を削除
 v  Visual Mode(範囲選択モード)に切り替え
 V  Visual Modeに切り替え、行単位で範囲作成
 :w  ファイルの保存
 :q  ファイルの終了(ファイルを閉じる)
 :q!  ファイルの強制終了(保存せずにファイルを閉じる)

 

他に良く使うコマンド

y  コピー
yy  1行コピー
dd  1行削除
p  ペースト
u  アンドゥ(操作を1つ戻す)
r  リドゥ(操作を1つ進める)
gg  ページの先頭に移動
G  ページの最後尾に移動
ctrl + u  ページを上にスクロールする
ctrl + d  ページを下にスクロールする
/hoge  文字列検索(「/」を入力後文字列を入力)
/hoge の後に n  文字列検索後、次の候補に移動
/hoge の後に N  文字列検索後、前の候補に移動

 

注意する点は、コピー/ペースト、アンドゥ/リドゥぐらいでしょうか。

 

始めは何もしないと行番号がなかったり、バックスペースが効かなかったりするので、また次の機会に設定について詳しくご紹介できればと思います。

 

詳しく紹介されている記事は豊富にあるので、一度見てもらえればよりVimのことが理解できると思います。
http://qiita.com/JpnLavender/items/fabcc79b4ab0d52e1f6d

 

エディターは使い慣れたものが一番だとは思いますが、Vimという選択肢も悪くないですよ♪