抽選プログラムを開発しました

こんにちは。開発担当のマットです。
 
Sploutでは、ライトニングトーク大会を定期的にやっております。
メンバー全員が順番に５分間のトークをして、とても楽しい時間です。
 
ライトニングトーク大会をするには、発表順を決める必要があります。
今までは順番を決めるのにあみだくじを使ったりしていましたが、折角システム開発会社なので、順番を決めてくれる抽選プログラムを作ってみようと思いました。
 
一番簡単な方法はブラウザでJavaScriptを実行させるだけです。
Google Chromeを開き、右クリックして、「検証」＞「コンソール」を押して、以下のスクリプトを貼り付けてEnterキーを押すと一瞬で順番を決めることができます。

超簡単ですが、面白くはないです。

Unityで面白いものを作ろう！

最近、Unityを学習しています。Unityは3Dゲームエンジンです(wikipedia) 。
これを使えば、何か面白い抽選プログラムを作れるではないかと！
 
考えついたのは「競馬」。

まずはプロジェクト開始。

とりあえず「Kuji」と名付けました。

プロジェクトに地面（Terrain)を入れる。

新規なUnityプロジェクトだと、カメラと照明しかないので、馬が走る地面をシーンの中に挿入する必要があります。
挿入して草のテキスチャーで塗りました。

次は馬の作成。

形を作る前に馬を象徴するゲームオブジェクトを作成します。

次はそのゲームオブジェクトの中に、複数のキューブで馬の形をなんとなく作り上げます。

色付けしましょう！

Unityでオブジェクトを色塗るには、Materialを作成すべきです。
Materialは「素材」という意味で、「色」だけではなく、「光沢」に関する色々な設定ができます。
とりあえず、２つのMaterialを作成し、馬の該当箇所に設定をしました。
片方はツヤ無しの馬毛。
他方はちょっとツヤ有りの鞍。

馬を走らせましょう！

Unityのアニメーション・システムで馬を走らせる動きを作るのは簡単です。

競馬場がないと・・・

簡単に壁と決勝線を地面の上に作りました。
馬もコピペして、サイズを調整。

馬にラベルを付ける。

誰がどの馬かわかりませんので、馬の上に名前ラベルを追加しました。

馬に個性を付ける。

次はスクリプトを作成して、馬のゲームオブジェクトに付属させました。
このスクリプトで、馬に付属しているMaterialの色やラベルの表記を設定できます。
これによって、馬をカスタマイズできるようになりました。

馬を並べましょう！

上記と同様に、馬のコピペだけでできました。
それぞれの馬の名前と色を設定します。
＊この画像は数字を使っていますが、実際の抽選の時は参加するメンバーの名前を入れました。

最後の最後に「レース」のスクリプトを作成！

最後にとても簡単なレースのスクリプトを作成しました。
「Spaceキー」を押すと馬達が走り出します。
UnityのUpdateファンクションで、毎フレーム、それぞれの馬をちょっとずつ前に進める。しかし、毎フレーム進める距離はある範囲以内のランダム値です。それで、それぞれの馬の進み具合に差が発生します。

なお、決勝線にたどり着くと、走り止んで、その馬のラベルに書いてある名前が一覧に表示される。これで発表順を決めることができます！

まとめ

まだ学習中ですが、Unityで簡単にできることに驚きました。
上記の抽選プログラムの総合開発時間は２時間だけでしたのに、アニメーションを対応した3Dプログラムを一から作ることができました。
とても、有力なツールです！

これからも、色々面白いプログラムを開発してみたいと思います！

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

 

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

 

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

 

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

新装版 日本語の作文技術

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

 

 

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

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

 

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

 

（１）節を先に、句をあとにする

（２）長い修飾語ほど先に、短いほどあとにする

（３）重要な内容ほど先にする

 

これが３つの法則です。

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

 

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

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

それでは（１）はどういうことになるのでしょうか。

（１）節を先に、句をあとにする

　（例１　※P70抜粋）

 

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

 

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

 

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

 

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

 

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

（２）長い修飾語ほど先に、短いほどあとにする

 

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


　（例２ ※P74）


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

　（例３ ※P75、76）

 

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

 

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

 

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

 

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

 

 

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

 

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

 

（３）重要な内容ほど先にする

 

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

 

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

（例４ ※P78）

 

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

 

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

 

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

 

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

 

まとめ

 

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

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

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

 

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

 

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

 

男はやっぱり肉がすき

こんにちわ。
リエです。
先日毎年恒例のお花見BBQを大阪城公園でしました。
↓昨年の様子はこちら↓

お花見BBQをしました


 
候補日が2日あり迷っていたのですが、お天気と予約の関係で早い方の日に決めました。
その時はまだ桜はそんなに咲いてないかな〜と話していました。
ところが今年は全国的に桜の開花が早く、お花見当日はすでに満開で葉桜になりつつあるという状態。
遅い日だと確実に間に合わなかったので、この判断は大正解でした！
 
今年から大阪城公園のBBQエリアは全面有料化したので、わたしたちはお堀横のゾーンを予約しました。
テーマは和というこうことで、どんな感じなんだろうと思っていたのですが、たしかに和でした(*_*)
 
この日はお天気にも恵まれ、まさしくお花見日和でした❀
食材と飲み物をたくさん買い込みBBQスタート。
※食材と飲み物の持ち込みはOKでした。
 
それではBBQの様子を写真にてお楽しみください。
 

大阪城が見える絶好のロケーション＼(^o^)／
 

厚切りベーコンにテンションが上がる男たち。
 

焼きリンゴが最高の焼き加減すぎて写真を取りまくる。
 
花粉症のメンバーはとてもつらそうでしたが、やはり外でみんなと食べるご飯は美味しいですね〜(*´∀｀)♡
 
食べることに夢中であんまり桜を見ませんでした。。
やはりわたしは花より団子です・ω・
 
我が社のメンズ達もやはりがnikuが好きって感じでした。
 
桜よ、また来年会う日まで(^_^)/~

CSS変数（CSSカスタムプロパティ）を使ってみよう！

CSSで変数が使えると話題になってから久しいですが、いつの間にか対応ブラウザが増えてきました。

IE11が未対応なので使いづらいのですが、そろそろ、CSS変数（CSSカスタムプロパティ）に目を通しておいたほうがいいかもしれませんね！

CSS変数（CSSカスタムプロパティ）の基本的な使い方

:root {
    --base-color: #ffff00;
}

.content {
    color: var(--base-color);
}

上の例のように変数の先頭に「–」（ハイフン2つ）を付けます。
これで、変数の定義がされます。

「:root」内に変数を定義することで、cssを読み込んだ全ての要素で変数が使えるようになります。

 

変数を呼び出す時には、var()関数を使います。
「color: var(–base-color);」のように、指定した変数を()の中に入れるだけです。

See the Pen css 変数（１） by naoto saito (@code_ns) on CodePen.

テキストが青色になりました。
基本的な使い方はとてもシンプルですね！

CSS変数とメディアクエリ

変数のみなら、Sassでもいい気がするのですが、動的に値が変わるのもcss変数を書くメリットです。

下記の例は、幅400pxで2カラムと4カラムを切り換えています。
(別ウィンドウで確認してください。)

See the Pen CSS 変数（２） by naoto saito (@code_ns) on CodePen.

JSでの操作

Sassと違い、CSS変数であれば、JavaScriptで値を取得したり、変更したりできます。
下記の例では青色に指定したテキストをJavaScriptで変数を変更し赤色に変更しています。

See the Pen CSS 変数（３） by naoto saito (@code_ns) on CodePen.

 

この例だとテキストの色を１箇所変えるだけなので、メリットは感じられないかもしれませんが、次のように変更箇所が何箇所も出てくる場合に便利さを感じられるかもしれません。
（Choose a theme colorの右のボックスで色の変更）

See the Pen Theming a site with CSS Custom Properties by Chris Coyier (@chriscoyier) on CodePen.

 

このように、もしIE11で使えるようになったら、CSSの管理やJavaScriptとの連携が、さらに簡単になりそうです。

 

神山しずくプロジェクト – SHIZQ再び

こんにちわ。
リエです。
 
先日徳島県神山町へお伺いしましたが、なぜ神山町を訪問したかと言いますと、こちらのブログでご紹介しましたSHIZQさんへお伺いするためでした。

 
ちなみに弊社のメンバーは全員、SHIZQ鶴コップを使わせていただいております♡

スプラウトへ入社してくれてありがとう


 
SHIZQさんは、神山町の山や川を守るため、「木を使う」活動を始められて、その中で神山町の杉の新たな活用法を考え、杉の製品が生まれました。
それがSHIZQ製品です。
製品はウェブストアとお店で買うことができます。
お店は古民家を改築したおしゃれな佇まいです。

 
お伺いした時に、新メンバーのコップを選んできました。

 
ウェブストアで購入し、どんな模様のものが届くかワクワクするのも楽しいですが、実際に手にとって選べるのもとても楽しいです♪
でも一つ一つ表情が違うので、悩む悩む・・・。
これだ！というものを選び、会社に連れて帰ってきました(*´∀｀)
新メンバーへの贈呈式（と言うほどそんなたいそうなものではないです）の様子はまた別ブログで書きたいと思います。
 
そして今回の訪問のもうひとつの目的である、昨年10月にオープンしました、SHIZQさんの木工所「SHIZQ LAB.」も見学させていただきました。

 
このLABで、SHIZQさんの製品は生まれます。
中は、木を切るための機械やろくろなど、たくさんの機械が置かれていました。
数ある杉の中から、選定されたSHIZQ製品になる杉たちも保管されています。
製品の工程作業や、杉の選定のお話しなどを聞き、たくさんの人の手が加わってSHIZQ製品は生まれるのだなと感慨深い気持ちになりました。
使っているSHIZQコップをより大事にしたいと思います。
 
SHIZQ様、本当にありがとうございました！
 
神山しずくプロジェクト
http://shizq.jp/
 
オフィシャルウェブストア
https://shizq.stores.jp/
 
〜SHIZQ GalleryShop情報〜
オープン時間：10〜18時
定休日：月曜
（小さなショップのため、事前にご連絡を頂けるとたいへん助かります）
場所：徳島県名西郡神山町神領本上角90 （キネトスコープ社に併設）
TEL：088-636-7292
FAX：088-636-7293
MAIL：info@shizq.jp
クレジットカードもご利用いただけます。
(VISA・Master Card・AMERICAN EXPRESS)