技術ブログ | 株式会社アイプランニング IPlanning corporation アイプランニング社員が調査したこと、学んでいることが具体的にどんなものなのかを披露します。 Here is what the IPlanning corp employees surveyed and what they learned. 2021-07-21T16:08:18+09:00 iplcojp Hatena::Blog hatenablog://blog/8599973812318302909 アイプランニングでWeb入門するときに利用している教材など hatenablog://entry/26006613789061642 2021-07-21T16:08:18+09:00 2021-07-21T16:08:18+09:00 アイプランニングではB2Bのデスクトップアプリケーション開発が主流ですが、 Webシステムの開発を引き受けることも多くなっています。 当然人材育成が必要になるのですが、現時点でIPLで教育に使っている・使う予定のある教材を紹介します。 Webの基礎知識 ウェブ入門 - ウェブ開発を学ぶ | MDN まずはHTMLとCSSの学習から始め、サーバ・クライアントのイメージとDOMについての理解のベースを作ります。 MDNは現在最も信頼のおける学習リソースとなっています。 Webのローレベル Webアプリエンジニアはいきなりフレームワークから学ぶことも多いと思うのですが、 実務ではChrome Dev… <p>アイプランニングでは<a class="keyword" href="http://d.hatena.ne.jp/keyword/B2B">B2B</a>のデスクトップアプリケーション開発が主流ですが、 Webシステムの開発を引き受けることも多くなっています。 当然人材育成が必要になるのですが、現時点でIPLで教育に使っている・使う予定のある教材を紹介します。</p> <h1>Webの基礎知識</h1> <p><a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web">&#x30A6;&#x30A7;&#x30D6;&#x5165;&#x9580; - &#x30A6;&#x30A7;&#x30D6;&#x958B;&#x767A;&#x3092;&#x5B66;&#x3076; | MDN</a></p> <p>まずはHTMLと<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の学習から始め、サーバ・クライアントのイメージとDOMについての理解のベースを作ります。 MDNは現在最も信頼のおける学習リソースとなっています。</p> <h1>Webのローレベル</h1> <p>Webアプリエンジニアはいきなり<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>から学ぶことも多いと思うのですが、 実務では<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a> DevToolsでリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>トとにらめっこということも多くあります。 また、ローレベルをかみ砕いた網羅的な資料はネット上だと見つけづらいということもあり、書籍を持っておくことをお勧めします。</p> <p><a href="https://www.amazon.co.jp/dp/B08MVXPW3V/">&#x56F3;&#x89E3;&#x5165;&#x9580;TCP/IP &#x4ED5;&#x7D44;&#x307F;&#x30FB;&#x52D5;&#x4F5C;&#x304C;&#x898B;&#x3066;&#x308F;&#x304B;&#x308B; | &#x307F;&#x3084;&#x305F; &#x3072;&#x308D;&#x3057; | &#x30B3;&#x30F3;&#x30D4;&#x30E5;&#x30FC;&#x30BF;&#x30FB;IT | Kindle&#x30B9;&#x30C8;&#x30A2; | Amazon</a></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/TCP/IP">TCP/IP</a>メインの書籍ですが、HTTPに関しても説明されています。</p> <p><a href="https://www.oreilly.co.jp/books/9784873118789/">O&#39;Reilly Japan - Real World HTTP &#x30DF;&#x30CB;&#x7248;</a></p> <p>こちらは同名書籍のミニ版(無料)ですが、概略をつかむのに良い資料です。 歴史も絡めてHTTPの進化について説明されています。</p> <h1>モダン<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>の基礎</h1> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>はいつでも変化期にあるため、いつ書かれたものであるかが重要になってきます。 とはいえモダンブラウザが主流になっていくのであれば、古い知識はノイズになってくることでしょう。</p> <p><a href="https://jsprimer.net/">JavaScript Primer - &#x8FF7;&#x308F;&#x306A;&#x3044;&#x305F;&#x3081;&#x306E;&#x5165;&#x9580;&#x66F8; #jsprimer</a></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> Primerは<a class="keyword" href="http://d.hatena.ne.jp/keyword/ECMAScript">ECMAScript</a>の仕様策定にかかわった方が著者であり、信頼のおける入門サイトです。 ただし少し内容が詳細すぎる面もあり、できればメンターが少しかみ砕くようにしたほうが良いでしょう。 例えば非同期処理・コールバック・Promiseの章などはもともと易しくできない内容なので難しいのですが、 あまりマスターすることに拘泥しないほうが良いかもしれません。</p> iplcojp タートルグラフィックスで「納品体験」 hatenablog://entry/26006613657702127 2020-11-27T21:22:57+09:00 2020-11-27T22:07:33+09:00 毎年恒例の1dayインターンですが、前年まで実施していた「レゴで学ぶスクラム」はコロナ対策の為 実施不可能になってしまいました。好評だったのに残念です… レゴスクラムは元ネタが存在するため楽だったのですが、前例のない状況下ですので自分で考えなくてはなりません。 頭を捻った末に生まれたのがこの「タートルグラフィックスで納品体験」です。 概要 Scratchでタートルグラフィックスを作り、それをクリスマスツリーに飾ります。 使うツール Code.org 課題#1~#5 Code.org 課題#10 タートル配置ツール スライド 学ぼうプログラミング 目的 forループを使って成果物を作る 見積もり… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20201127/20201127211213.png" alt="f:id:iplcojp:20201127211213p:plain" title="" class="hatena-fotolife" itemprop="image"></span></p> <p>毎年恒例の1day<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A1%BC%A5%F3">インターン</a>ですが、前年まで実施していた「<a href="https://iplanning.hatenablog.jp/entry/2017/04/07/000000">レゴで学ぶスクラム</a>」はコロナ対策の為 実施不可能になってしまいました。好評だったのに残念です…</p> <p>レゴ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%E9%A5%E0">スクラム</a>は元ネタが存在するため楽だったのですが、前例のない状況下ですので自分で考えなくてはなりません。 頭を捻った末に生まれたのがこの「タートルグラフィックスで納品体験」です。</p> <h1>概要</h1> <p>Scratchでタートルグラフィックスを作り、それをクリスマスツリーに飾ります。</p> <h1>使うツール</h1> <ul> <li><a href="https://studio.code.org/s/artist/stage/1/puzzle/1">Code.org 課題#1~#5</a></li> <li><a href="https://studio.code.org/s/artist/stage/1/puzzle/10">Code.org 課題#10</a></li> <li><a href="https://iplanning.heteml.net/intern/turtle/">タートル配置ツール</a></li> </ul> <h1>スライド</h1> <p><a href="https://slides.com/cojpipl/deck-79c809/">&#x5B66;&#x307C;&#x3046;&#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30DF;&#x30F3;&#x30B0;</a></p> <h1>目的</h1> <ul> <li>forループを使って成果物を作る</li> <li>見積もりを体験する</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DA%A5%A2%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0">ペアプログラミング</a>を体験する</li> </ul> <h1>対象</h1> <ul> <li>プログラミング未経験者2~4名</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DA%A5%A2%A5%D7%A5%ED">ペアプロ</a>を実施するために偶数名が望ましいです。</li> <li>所要時間1.5時間ほど</li> </ul> <h1>準備</h1> <ul> <li>プロジェクター(主催者のPCを映す)</li> <li>人数分のPC</li> <li>大きめの正方形の付箋</li> <li>ホワイトボード</li> </ul> <h1>流れ</h1> <h2>1. 準備運動</h2> <ul> <li>まずScratchの使い方を学んでもらいます。Code.orgの#5あたりまで進めます。</li> <li>Code.orgの#10を開き、自由な図形を描けるようにします。</li> <li>主催者はタートル配置ツールをプロジェクターに映しておきます。</li> </ul> <h2>2. ツリーのア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>出し</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20201127/20201127211950.png" alt="f:id:iplcojp:20201127211950p:plain" title="" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>ホワイトボードにクリスマスツリーを書き、メンバーに好きにオーナメントを書いてもらいます。合計10個くらいあると良いと思います。</li> <li>オーナメントを大きめの付箋に転記してもらい、ホワイトボードに張り出します。簡単・難しいで分けておくと良いでしょう。</li> </ul> <h2>3. 計画</h2> <ul> <li>10分間の時間制限を設けることを説明します。</li> <li>メンバーの名前で区切りを作り、メンバー間で相談し10分間でできそうな量を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%B5%A5%A4">アサイ</a>ンしてもらいます。</li> </ul> <h2>4. 作業</h2> <ul> <li>Code.org上に図形を作ってもらいます。</li> <li>10分タイマーをスタートし、各自作業を実施します。</li> </ul> <h2>5. 納品</h2> <ul> <li>作成が完了したら、納品に移ります。</li> <li>エディタ右上の「コードの表示」から<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>コードを出力できますので、コピーしてもらってください。</li> <li>チャットツール等で納品コードを主催者に送ってもらいます。</li> <li>タートル配置ツールを使い、オーナメントを指定の位置に配置してください。</li> </ul> <h2>6. タイムボックスを繰り返す</h2> <ul> <li>10分間を繰り返します。</li> <li>10分間の作業が完了するたびに、作業の見直しを行ってください。</li> <li>予定に無理があれば、作るオーナメントを変更しても問題ありません。</li> <li>オーナメント自体の形状を見直してもよいでしょう。</li> </ul> <h2>7. <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DA%A5%A2%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0">ペアプログラミング</a></h2> <ul> <li>タイムボックスを2度ほど回したタイミングで、作業者とアド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>をする人でペアを作り、共同作業で一つのオーナメントを作ってもらいます。</li> <li>ホワイトボードを使うように誘導すると連携が生まれやすいです。</li> </ul> <h2>8. まとめ</h2> <ul> <li>それぞれ、感想を言ってもらいましょう。</li> <li>ワークショップを通じて、作業の振り分けや見積もりが可能になっているはずですので、その点に言及します。</li> <li>最後に、ツリーの出来栄え、メンバーの努力とア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>を称賛しましょう。そもそも初めて使うツールで、やったことのないタートルグラフィックスを使って手探りで成果物を作れたというのは素晴らしいことです。達成率や形状の美しさは二の次です。</li> </ul> <h1>Tips</h1> <h2>オーナメントのア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>出しで数を出すための工夫</h2> <ul> <li>ア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>出しのコツは、出たア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>を批評せず受け入れることです。</li> <li>「渋谷に飾るクリスマスツリーだから」などと言っておくと、オーナメントのネタ出しがしやすくなります。</li> <li>作る時のことを考えて単純な形を選びがちですが、自由な発想で書くように誘導してください。</li> <li>難しい形状ばかりになってしまった時は、詰まってしまったときの逃げ道として簡単な形状を人数分足してあげてください。</li> </ul> <h1>注意点</h1> <ul> <li>見積もり体験がこのワークショップの目的です。作業スピードや品質などは目的ではないので、言及するときにはメンバーに対する攻撃にならないよう注意してください。</li> <li>個々人の適正や慣れにより作業スピードは大きく異なります。優劣を付けるようなことを言うべきではありませんし、むしろフォローしてあげてください。</li> <li>タスクの完遂にこだわらないでください。形状により大きく難易度が変わるので、たいてい無理です。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DA%A5%A2%A5%D7%A5%ED%A5%B0%A5%E9%A5%DF%A5%F3%A5%B0">ペアプログラミング</a>が一番盛り上がります。これはフラットな関係がキーになっているようで、主催者が上から介入するとたいてい盛り下がりますので注意してください。</li> </ul> <h1>その他技術的なこと</h1> <ul> <li>タートル配置ツールは内製ツールです。Code.orgの吐くコードに対応する<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>を自前実装しています。色変え・線替え・スタンプなどには対応していません。</li> </ul> iplcojp CSSレイアウト入門(社内ワークショップ用資料) hatenablog://entry/26006613493979482 2020-01-06T14:51:26+09:00 2020-01-06T17:51:34+09:00 本記事では、CSSレイアウトの基礎とレスポンシブレイアウトについて学ぶ事ができます。 利用方法と対象読者層 この記事は社内CSSワークショップのために書かれた記事ですが、教育用途などにご自由にご利用ください。説明に1~1.5時間要します。 対象はHTML, CSSの基礎を知っている方です。div等代表的な要素を知っている、CSSセレクタがわかるレベルを想定しています。 基本的にはMDNの下記の記事を下敷きにしています。内容はなるべく噛み砕き、利用頻度の低い手法は省略しましたが、記載に食い違いがある場合はMDN側を正と考えてください。 developer.mozilla.org 通常フロー ブラ… <p>本記事では、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>レイアウトの基礎とレスポンシブレイアウトについて学ぶ事ができます。</p> <h1>利用方法と対象読者層</h1> <p>この記事は社内<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>ワークショップのために書かれた記事ですが、教育用途などにご自由にご利用ください。説明に1~1.5時間要します。</p> <p>対象はHTML, <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の基礎を知っている方です。div等代表的な要素を知っている、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BB%A5%EC%A5%AF%A5%BF">セレクタ</a>がわかるレベルを想定しています。</p> <p>基本的にはMDNの下記の記事を下敷きにしています。内容はなるべく噛み砕き、利用頻度の低い手法は省略しましたが、記載に食い違いがある場合はMDN側を正と考えてください。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FLearn%2FCSS%2FCSS_layout%2FIntroduction" title="CSS レイアウト入門" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Introduction">developer.mozilla.org</a></cite></p> <h1>通常フロー</h1> <p>ブラウザはレイアウトの関する<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>が未指定の場合でも、要素を順に並べていく「通常フロー」を行います。 このデフォルトの挙動を理解して活用するようにすると、無駄の少ない<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>を書くことに繋がります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106142134.png" alt="f:id:iplcojp:20200106142134p:plain" title="f:id:iplcojp:20200106142134p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>通常フローは、基本的に文字を書く方向に要素を詰めていきます。日本では上から下、左から右です。</p> <p>並べ方には、要素の種別が重要になります。代表的な3つを紹介します。</p> <h2>block要素</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106142320.png" alt="f:id:iplcojp:20200106142320p:plain" title="f:id:iplcojp:20200106142320p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>block要素は、div要素やp要素にデフォルトで設定されている種別です。</p> <h2>inline-block要素</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106142349.png" alt="f:id:iplcojp:20200106142349p:plain" title="f:id:iplcojp:20200106142349p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>block要素に<code>display: inline-block</code>を設定することで、この挙動をさせることができます。 また、img要素はこのinline-block要素相当の挙動をするとみなせます(歴史的経緯によりこの言い方になります)。</p> <h2>inline要素</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106142518.png" alt="f:id:iplcojp:20200106142518p:plain" title="f:id:iplcojp:20200106142518p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2>サンプルで試してみる</h2> <div style="font-size: 2em"><a href="https://codepen.io/ipl068/pen/PowEpdR" target="_blank">サンプルを開く</a></div> <p>サンプルを開いて、<code>display</code>オプションの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%E1%A5%F3%A5%C8%A5%A2%A5%A6%A5%C8">コメントアウト</a>部分を切り替えて、説明通りの挙動になっているか確認してみてください。</p> <h1>flexbox</h1> <p>flexboxは、伸縮するレイアウトを作る際によく使われるレイアウト方法です。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106142814.png" alt="f:id:iplcojp:20200106142814p:plain" title="f:id:iplcojp:20200106142814p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>通常フローで作れないレイアウトは、大抵これで作ることができます(テーブルのような特殊なレイアウトを除く)。 (より高度なレイアウトをスマートに作るには「gridレイアウト」を使うこともできます)</p> <h2>例題</h2> <div style="font-size: 2em"><a href="https://codepen.io/ipl068/pen/LYEeWgb" target="_blank">例題を開く</a></div> <p>上記のコードを編集して、下記の画像のようなレイアウトを作ってみてください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106171424.png" alt="f:id:iplcojp:20200106171424p:plain" title="f:id:iplcojp:20200106171424p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ヒント:下記の3行を使います。</p> <pre class="code" data-lang="" data-unlink>display: flex; width: 200px; flex: 1;</pre> <h1>position: absolute</h1> <p>上記のレイアウトから少し外れたようなレイアウトは「position: absolute」で作ることができます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106143136.png" alt="f:id:iplcojp:20200106143136p:plain" title="f:id:iplcojp:20200106143136p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>基準指定した要素から相対位置でボックスを配置することができます。大抵のケースでは親要素を基準にします。親要素に「position: relative」を指定してください。</p> <p>例えば、下記のように左上にタグを貼り付けたようなレイアウトを作ることができます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106171708.png" alt="f:id:iplcojp:20200106171708p:plain" title="f:id:iplcojp:20200106171708p:plain" class="hatena-fotolife" itemprop="image"></span></p> <div style="font-size: 2em"><a href="https://codepen.io/ipl068/pen/povpwNw" target="_blank">サンプルを開く</a></div> <p>なお、absolute指定した要素に続く要素は下に潜りこむことに注意してください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106172130.png" alt="f:id:iplcojp:20200106172130p:plain" title="f:id:iplcojp:20200106172130p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h1>レスポンシブレイアウト</h1> <p>レスポンシブレイアウトは、画面サイズに応じてレイアウトを切り替える手法です。例えば下記のように<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>とデスクトップで段組みを切り替えるのがよくある例です。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106143531.png" alt="f:id:iplcojp:20200106143531p:plain" title="f:id:iplcojp:20200106143531p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これはメディアクエリを使うことで<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>のみで実現可能です。 試しに、下記のようなレイアウトを作ってみましょう。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20200106/20200106173907.gif" alt="f:id:iplcojp:20200106173907g:plain" title="f:id:iplcojp:20200106173907g:plain" class="hatena-fotolife" itemprop="image"></span></p> <div style="font-size: 2em"><a href="https://codepen.io/ipl068/pen/MWYroOr" target="_blank">例題を開く</a></div> <p>例題は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>レイアウトのみ実装してありますので、600px以上はレイアウトを変更するようにしてください。メディアクエリは下記のように書きます。</p> <pre class="code" data-lang="" data-unlink>@media screen and (min-width: 600px) { &lt;!-- ここに上書きしたいCSSを書く --&gt; }</pre> <p>メディアクエリのmin-widthを使うことで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%EF%E7%C3%CD">閾値</a>以上の画面幅の場合に上書き適用する<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>を設定します。<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>は基本的に後勝ちになりますので、メディアクエリは<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の末尾に書くようにしてください。</p> <ul> <li>.parentに <code>display: flex;</code> を適用</li> <li>.boxの背景色を変更し、<code>flex: 1</code>と<code>margin: 5px;</code>を指定する</li> </ul> <div style="font-size: 2em"><a href="https://codepen.io/ipl068/pen/rNapwzv" target="_blank">回答例</a></div> <p>上記の方針はモバ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%EB%A5%D5%A5%A1">イルファ</a>ーストアプローチと呼びます。まず<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>向けの画面を作り、デスクトップ向けの段組み等を使った複雑なレイアウトをメディアクエリで後付します。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>向けレイアウトは通常フローで済むケースも多いため、デスクトップ向けの画面を特殊扱いしたほうが、デフォルト値を活用したクリーンなコードになりやすいです。</p> <h1>まとめ</h1> <p>上記までで、基本的なレイアウトとレスポンシブレイアウト実装の基礎を学びました。より詳しいことを知りたい場合は<a href="https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Introduction">MDNの記事</a>を参照してください。</p> iplcojp Node.jsとnpmを使ってみよう hatenablog://entry/26006613479066632 2019-12-09T13:54:48+09:00 2019-12-09T15:56:19+09:00 アイプランニングはWeb系企業ではありませんが、Web技術に関しての社内講座やハンズオンも積極的に実施しています。 Node.js入門として一般の方にも参考にしていただけるよう、一部を公開いたします。 Node.jsとは Node.jsはサーバサイドJavaScriptランタイムです。たとえば、下記のようにJavaScriptファイルを実行することができます。 node main.js ブラウザもJavaScriptランタイムの一つですが、Node.jsではセキュリティ上の理由でブラウザにはない「ファイルシステムへのアクセス」などの機能を使うことができます。 const fs = requir… <p>アイプランニングはWeb系企業ではありませんが、Web技術に関しての社内講座やハンズオンも積極的に実施しています。 Node.js入門として一般の方にも参考にしていただけるよう、一部を公開いたします。</p> <h1>Node.jsとは</h1> <p>Node.jsはサーバサイド<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>ランタイムです。たとえば、下記のように<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>ファイルを実行することができます。</p> <pre class="code bash" data-lang="bash" data-unlink>node main.js</pre> <p>ブラウザも<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>ランタイムの一つですが、Node.jsではセキュリティ上の理由でブラウザにはない「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%A1%A5%A4%A5%EB%A5%B7%A5%B9%A5%C6%A5%E0">ファイルシステム</a>へのアクセス」などの機能を使うことができます。</p> <pre class="code js" data-lang="js" data-unlink>const fs = require(&#34;fs&#34;); fs.writeFileSync(&#34;out.txt&#34;, &#34;Hello, World&#34;);</pre> <p><code>fs</code>はNode.jsにしか存在しない<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%A1%A5%A4%A5%EB%A5%B7%A5%B9%A5%C6%A5%E0">ファイルシステム</a>周りのアクセスを行えます。 上記<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>をNode.js上で実行すると、<code>out.txt</code>というファイルに<code>Hello, World</code>が書き込まれます。</p> <p>Node.jsのインストールは下記より行ってください。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fnodejs.org%2Fja%2F" title="Node.js" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://nodejs.org/ja/">nodejs.org</a></cite></p> <h1>npm</h1> <p>npmは「パッケージマネージャ」という種類のツールで、Node.jsに同梱されています。</p> <p>npm上に多数の便利なライブラリやツールが登録されており、気軽に使うことができます。また、登録も個人が自由に行うことができます。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.npmjs.com%2F" title="npm | build amazing things" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.npmjs.com/">www.npmjs.com</a></cite></p> <p>Node.jsの人気の理由の一つは、npm上に公開されているツール群を使いたいというニーズがあるためです。</p> <h1>npm上に登録されているツールを使ってみよう</h1> <p>実際に使ってみましょう。</p> <h2>Less</h2> <p>Lessは<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%B8%C0%B8%EC">メタ言語</a>という種類の言語・ツールです。Lessは変数・mixinなどの付加機能を使うことができます。最終的には<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>ファイルに変換されます。</p> <p>下記のコマンドでインストールできます。</p> <pre class="code bash" data-lang="bash" data-unlink>npm install -g less</pre> <p>下記のファイルを<code>style.less</code>という名前で保存してください。</p> <pre class="code less" data-lang="less" data-unlink>@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }</pre> <p>下記でlessファイルを<a class="keyword" href="http://d.hatena.ne.jp/keyword/css">css</a>ファイルに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>できます。</p> <pre class="code bash" data-lang="bash" data-unlink>lessc style.less style.css</pre> <p>出力された<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>で、変数が解決されていることを確認してください。</p> <pre class="code lang-css" data-lang="css" data-unlink><span class="synIdentifier">#header</span> <span class="synIdentifier">{</span> <span class="synType">width</span>: <span class="synConstant">10px</span>; <span class="synType">height</span>: <span class="synConstant">20px</span>; <span class="synIdentifier">}</span> </pre> <p>変数は最近の<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の仕様に盛り込まれているのと、業界的にはSassというLessに似た<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E1%A5%BF%B8%C0%B8%EC">メタ言語</a>が人気なため、Lessの名前を聞くことが最近は減っていますが、業務と要件に合ったものを使えばOKです。</p> <h2>TypeScript</h2> <p>TypeScriptは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>の強化を目的とした言語です。特に型周りの機能強化が特徴です。 こちらも最終的には<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>に変換されます。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%E9">コンパイラ</a>をインストールしましょう。</p> <pre class="code bash" data-lang="bash" data-unlink>npm install -g typescript</pre> <p>main.tsファイルを作成します。</p> <pre class="code ts" data-lang="ts" data-unlink>function add(x, y) { return x + y } console.log(add(1, 2))</pre> <p>下記を実行して<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>します。</p> <pre class="code bash" data-lang="bash" data-unlink>tsc main.ts</pre> <p>ほぼ同じ内容のmain.jsが生成されたことを確認してください。</p> <p>次に、型に関する機能を確認してみましょう。下記のように<code>main.ts</code>を書き換えてください。</p> <pre class="code ts" data-lang="ts" data-unlink>function add(x: number, y: number) { return x + y } console.log(add(1, 2))</pre> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>して、JSファイル自体は内容が変わらないことを確認してください。 TSファイルでは引数に <code>number</code> 型しか受け取らないようになっていますが、JSファイルに出力する時点でこの型に関する注釈は削除されます。</p> <p>次に、下記のように引数を一つ文字列に変更してみてください。</p> <pre class="code" data-lang="" data-unlink>console.log(add(&#34;1&#34;, 2))</pre> <p>すると、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>自体が通らなくなります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191209/20191209135159.png" alt="f:id:iplcojp:20191209135159p:plain" title="f:id:iplcojp:20191209135159p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>実装に矛盾のあるコードの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>を通さないことは非常に重要です。 <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>の利用方法のミス、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%D5%A5%A1%A5%AF%A5%BF%A5%EA%A5%F3%A5%B0">リファクタリング</a>時の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%B0%A5%EC%A1%BC%A5%C9">デグレード</a>などのヒューマンエラーを防止することができ、 「実装が間違っているがなんとなく動いているコード」を早期発見することにも繋がります。</p> <h1>この先の学習について</h1> <ul> <li>ここでは簡単のため <code>install -g</code>を行いましたが、これはグローバルインストールというもので、もう少し行儀の良い方法としてはローカルインストールがあります。</li> <li>ローカルインストールについては<code>package.json</code>あるいは<code>node_modules</code>についての理解が必要です。下記記事を参考にしてみてください。 <ul> <li><a href="https://qiita.com/righteous/items/e5448cb2e7e11ab7d477">&#x3010;&#x521D;&#x5FC3;&#x8005;&#x5411;&#x3051;&#x3011;NPM&#x3068;package.json&#x3092;&#x6982;&#x5FF5;&#x7684;&#x306B;&#x7406;&#x89E3;&#x3059;&#x308B; - Qiita</a></li> </ul> </li> <li>Node.js自体を深く学習するためには、サーバサイドアプリケーションを一つ作ってみると良いでしょう。Expressというサーバサイド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>がおすすめです。 <ul> <li><a href="https://sbfl.net/blog/2018/08/25/nodejs-express-webapi/">Node.js&#x3068;Express&#x3067;Web API&#x3092;&#x4F5C;&#x3063;&#x3066;&#x307F;&#x3088;&#x3046;</a></li> </ul> </li> </ul> iplcojp アイプランニングのインターン資料を公開します hatenablog://entry/26006613468612523 2019-11-20T15:43:05+09:00 2019-12-12T14:17:18+09:00 インターンで実施しているプログラミング講座の資料を一般公開します。 インターンや新卒社員向けの講座コンテンツは多いですが、ゼロ知識から読めるものは数が限られます。 インターンでの講座受講者や、他社のセミナーなどにもぜひご活用ください。 プログラミングコース プログラミングコースは「タイピングができる」レベルの受講者を対象に、Webアプリ開発を簡易体験できるコースです。 スライド資料 slides.com 講座資料&チュートリアル iplanning.hatenablog.jp iplanning.hatenablog.jp 業界研究コース 業界研究コースは、簡易版のプログラミング概要と、レゴス… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A1%BC%A5%F3">インターン</a>で実施しているプログラミング講座の資料を一般公開します。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A1%BC%A5%F3">インターン</a>や新卒社員向けの講座コンテンツは多いですが、ゼロ知識から読めるものは数が限られます。 <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A1%BC%A5%F3">インターン</a>での講座受講者や、他社の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BB%A5%DF">セミ</a>ナーなどにもぜひご活用ください。</p> <h1>プログラミングコース</h1> <p>プログラミングコースは「タイピングができる」レベルの受講者を対象に、Web<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%B3%AB%C8%AF">アプリ開発</a>を<b>簡易体験</b>できるコースです。</p> <p>スライド資料</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fslides.com%2Fcojpipl%2Fdeck" title="IPlanning インターン PGコース" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://slides.com/cojpipl/deck">slides.com</a></cite></p> <p>講座資料&<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a></p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fiplanning.hatenablog.jp%2Fentry%2F2019%2F11%2F20%2F121201" title="CodePenを使ってWeb開発を体験する 前編(HTML / CSS) - 技術ブログ | 株式会社アイプランニング IPlanning corporation" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://iplanning.hatenablog.jp/entry/2019/11/20/121201">iplanning.hatenablog.jp</a></cite></p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fiplanning.hatenablog.jp%2Fentry%2F2019%2F11%2F20%2F153702" title="CodePenを使ってWeb開発を体験する 後編(Vue.js) - 技術ブログ | 株式会社アイプランニング IPlanning corporation" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://iplanning.hatenablog.jp/entry/2019/11/20/153702">iplanning.hatenablog.jp</a></cite></p> <h1>業界研究コース</h1> <p>業界研究コースは、簡易版のプログラミング概要と、レゴ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%E9%A5%E0">スクラム</a>の体験コースを含んでいます。</p> <p>簡易版プログラミング概要のスライドです。</p> <p><a href="https://iplanning.heteml.net/intern/slide/">IPL&#x30BB;&#x30DF;&#x30CA;&#x30FC; JavaScript&#x7DE8;</a></p> <p>実施者向けの解説記事を公開しています。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fiplanning.hatenablog.jp%2Fentry%2F2017%2F04%2F07%2F000000" title="レゴによるスクラム体験 - 技術ブログ | 株式会社アイプランニング IPlanning corporation" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://iplanning.hatenablog.jp/entry/2017/04/07/000000">iplanning.hatenablog.jp</a></cite></p> <p>スライドのPDFも公開しています。</p> <p><a href="https://iplanning.heteml.net/intern/ipl-seminar-r5-lego.pdf">https://iplanning.heteml.net/intern/ipl-seminar-r5-lego.pdf</a></p> <p>プログラミング概要の資料に関しては、内製アプリを含むため非公開にしています。</p> <p><span style="font-size: 50%"><a href="https://iplanning.heteml.net/intern/bot/">botくん</a></span></p> iplcojp CodePenを使ってWeb開発を体験する 後編(Vue.js) hatenablog://entry/26006613468610944 2019-11-20T15:37:02+09:00 2019-12-12T13:53:29+09:00 前編はこちら Vue.jsのセットアップ 引き続き、CodePen上で作業を行います。 画面右上のSettingsを選択します。 ダイアログが表示されたら、JavaScriptタブを選択し、Search CDNjs欄にvueと入力します。 するとリストにvueが表示されますので選択します。 上記のようになればOKです。Closeを選択してください。 Vue.jsをサンプルで学ぼう ここから先は、下記の繰り返しでVue.jsの役割について理解します。 まずサンプルアプリを触ってみる サンプルアプリの完成一歩手前のものを開く 説明に従って完成させる 最初のサンプル See the Pen Basi… <p><a href="https://iplanning.hatenablog.jp/entry/2019/11/20/121201">前編はこちら</a></p> <h1>Vue.jsのセットアップ</h1> <p>引き続き、CodePen上で作業を行います。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120141151.png" alt="f:id:iplcojp:20191120141151p:plain" title="f:id:iplcojp:20191120141151p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>画面右上の<code>Settings</code>を選択します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120141419.png" alt="f:id:iplcojp:20191120141419p:plain" title="f:id:iplcojp:20191120141419p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ダイアログが表示されたら、<code>JavaScript</code>タブを選択し、<code>Search CDNjs</code>欄に<code>vue</code>と入力します。</p> <p>するとリストに<code>vue</code>が表示されますので選択します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120141603.png" alt="f:id:iplcojp:20191120141603p:plain" title="f:id:iplcojp:20191120141603p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>上記のようになればOKです。<code>Close</code>を選択してください。</p> <h1>Vue.jsをサンプルで学ぼう</h1> <p>ここから先は、下記の繰り返しでVue.jsの役割について理解します。</p> <ol> <li>まずサンプルアプリを触ってみる</li> <li>サンプルアプリの完成一歩手前のものを開く</li> <li>説明に従って完成させる</li> </ol> <h1>最初のサンプル</h1> <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="ipl068" data-slug-hash="XWWOOow" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Basic Binding"> <span>See the Pen <a href="https://codepen.io/ipl068/pen/XWWOOow"> Basic Binding</a> by Robert (<a href="https://codepen.io/ipl068">@ipl068</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <p><span style="font-size: 200%"><a href="https://codepen.io/ipl068/pen/eYYXYvO" target="_blank">未完成Verを開く</a></span></p> <p>まず、JS欄の<code>data</code>内に下記のように「nameデータ」を記載します。今回はnameデータには<code>Jiro</code>さんを入力します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120213106.png" alt="f:id:iplcojp:20191120213106p:plain" title="f:id:iplcojp:20191120213106p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>次に、HTML欄の<code>Taro</code>と書かれている部分を<code>{{name}}</code>に置き換えてください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120213318.png" alt="f:id:iplcojp:20191120213318p:plain" title="f:id:iplcojp:20191120213318p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>{{ name }}</code>のように書くことで、表示部分とdataを「<b>紐付け</b>」ることができます。 (Vue.jsはこれを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%F3%A5%C7%A5%A3%A5%F3%A5%B0">バインディング</a>という用語で呼びます)</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120143535.png" alt="f:id:iplcojp:20191120143535p:plain" title="f:id:iplcojp:20191120143535p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>name: "Taro"</code>の部分を変更すると、名前が変更されることを確認してください。</p> <h1>入力欄を作る</h1> <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="ipl068" data-slug-hash="yLLZWxx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Basic: v-model"> <span>See the Pen <a href="https://codepen.io/ipl068/pen/yLLZWxx"> Basic: v-model</a> by Robert (<a href="https://codepen.io/ipl068">@ipl068</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <p><span style="font-size: 200%"><a href="https://codepen.io/ipl068/pen/KKKEKyY" target="_blank">未完成Verを開く</a></span></p> <p>新たに<code>input</code>タグというものを学びます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120214003.png" alt="f:id:iplcojp:20191120214003p:plain" title="f:id:iplcojp:20191120214003p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>上記のように書くと、文字入力欄を作ることができます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120214017.png" alt="f:id:iplcojp:20191120214017p:plain" title="f:id:iplcojp:20191120214017p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>v-model</code>を使うと、data内の文字列をこのinputで変更することができます。 HTMLを下記のように書き換えてみましょう。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120214217.png" alt="f:id:iplcojp:20191120214217p:plain" title="f:id:iplcojp:20191120214217p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>文字入力欄を変更すると、下記のように書き換わることを確認してください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120214423.png" alt="f:id:iplcojp:20191120214423p:plain" title="f:id:iplcojp:20191120214423p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>Vue.jsが便利なのは、このような「紐付け」がとても簡単に行えることです。 プログラミングでは「紐付け」を適切に行うことで便利なものを作ることができます。</p> <h1>はんこメーカー</h1> <p>上記で学んだことを使って、実用的?なものを作ってみましょう。</p> <p class="codepen" data-height="461" data-theme-id="light" data-default-tab="result" data-user="ipl068" data-slug-hash="wvvNbOp" style="height: 461px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="hanko-simple"> <span>See the Pen <a href="https://codepen.io/ipl068/pen/wvvNbOp"> hanko-simple</a> by Robert (<a href="https://codepen.io/ipl068">@ipl068</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <p><span style="font-size: 200%"><a href="https://codepen.io/ipl068/pen/xxxBxag" target="_blank">未完成Verを開く</a></span></p> <p>HTMLでは、円などの図形も書くことができます(<a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a>といいます)。 また、今回は<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>を工夫して縦書きの文字も書いています。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120215205.png" alt="f:id:iplcojp:20191120215205p:plain" title="f:id:iplcojp:20191120215205p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>さて、名前を自由に変更可能にしましょう。 下記のようにv-modelと<code>{{name}}</code>を書いてください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120215347.png" alt="f:id:iplcojp:20191120215347p:plain" title="f:id:iplcojp:20191120215347p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これではんこの氏名を自由に変えられるようになりました。</p> <p>次に、色を自由に変更できるようにしましょう。 inputの種類の中には、色を選ぶものもあります。 <code>type="color"</code>を使います。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120215454.png" alt="f:id:iplcojp:20191120215454p:plain" title="f:id:iplcojp:20191120215454p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>クリックすると、色を選択するダイアログが表示されます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120215516.png" alt="f:id:iplcojp:20191120215516p:plain" title="f:id:iplcojp:20191120215516p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>さて、ここで選んだ色をはんこに反映させたいので、下記のように変更します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120215646.png" alt="f:id:iplcojp:20191120215646p:plain" title="f:id:iplcojp:20191120215646p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120215746.png" alt="f:id:iplcojp:20191120215746p:plain" title="f:id:iplcojp:20191120215746p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これでinputとcolorデータがひも付きました。 次に、文字色や円の色にcolorデータを紐付けます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120215945.png" alt="f:id:iplcojp:20191120215945p:plain" title="f:id:iplcojp:20191120215945p:plain" class="hatena-fotolife" itemprop="image"></span></p> <ol> <li><code>:</code>(コロン)を紐付けたい項目の前に付けます。</li> <li><code>=</code>の後に紐付けたいデータ名を入れます(今回は<code>color</code>)</li> </ol> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120220109.png" alt="f:id:iplcojp:20191120220109p:plain" title="f:id:iplcojp:20191120220109p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これで、好きな色のはんこが作れるようになりました。 ここまで、必要なのはただ「つなげる」ことだけです。</p> <h1>会いたくて震えるやつ</h1> <p class="codepen" data-height="420" data-theme-id="light" data-default-tab="result" data-user="ipl068" data-slug-hash="xxxBbQz" style="height: 420px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="会いたくて震える"> <span>See the Pen <a href="https://codepen.io/ipl068/pen/xxxBbQz"> 会いたくて震える</a> by Robert (<a href="https://codepen.io/ipl068">@ipl068</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <p><span style="font-size: 200%"><a href="https://codepen.io/ipl068/pen/ExxMaGL" target="_blank">未完成Verを開く</a></span></p> <p>さて、「ボタンを押すとなにかする」というものを作ってみたいと思います。 下記のように書くとボタンを作ることができます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120225023.png" alt="f:id:iplcojp:20191120225023p:plain" title="f:id:iplcojp:20191120225023p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ボタンを押すとなにか起きるようにするには、<code>@click</code>を使います。下記のように書き加えてください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120225120.png" alt="f:id:iplcojp:20191120225120p:plain" title="f:id:iplcojp:20191120225120p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ボタンをクリックすると、<code>furueru</code>データに<code>true</code>という値が入ります。ボタンを押すと絵文字が震えます。</p> <p>すでに下記のようなコードを組んであります。<code>v-if</code>というのは、値が「true」だった場合に表示するようにするものです。今回の場合は、<code>furueru</code>データが<code>true</code>だった時に震える絵文字を表示するようにしてあります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120225224.png" alt="f:id:iplcojp:20191120225224p:plain" title="f:id:iplcojp:20191120225224p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>逆に、<code>furueru</code>データが逆の<code>false</code>だった場合には、震えない絵文字を表示しています。</p> <p>さて、震えを止められるようにしましょう。 下記のように書き加えてください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120225504.png" alt="f:id:iplcojp:20191120225504p:plain" title="f:id:iplcojp:20191120225504p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これで震えを止められるようになりました。</p> <h1>MP3プレーヤー</h1> <p class="codepen" data-height="313" data-theme-id="light" data-default-tab="result" data-user="ipl068" data-slug-hash="jOOdgbE" style="height: 313px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="MP3 Player"> <span>See the Pen <a href="https://codepen.io/ipl068/pen/jOOdgbE"> MP3 Player</a> by Robert (<a href="https://codepen.io/ipl068">@ipl068</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <p><span style="font-size: 200%"><a href="https://codepen.io/ipl068/pen/vYYPEmQ" target="_blank">未完成Verを開く</a></span></p> <p>audioタグは小型のオーディオプレーヤーを表示するタグです。srcにmp3を指定すると、再生をすることができます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120222915.png" alt="f:id:iplcojp:20191120222915p:plain" title="f:id:iplcojp:20191120222915p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120223003.png" alt="f:id:iplcojp:20191120223003p:plain" title="f:id:iplcojp:20191120223003p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>今回は<code>src</code>を変更すると自動的に再生が始まるように「autoplay」を付けています。</p> <p>では、曲を切り替えられるようにしましょう。下記のように変更してください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120223112.png" alt="f:id:iplcojp:20191120223112p:plain" title="f:id:iplcojp:20191120223112p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>その後、buttonタグに書いてある <code>@click</code>の中にURLをコピペします。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120223214.png" alt="f:id:iplcojp:20191120223214p:plain" title="f:id:iplcojp:20191120223214p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これで、ボタンがクリックされたときにselectedにmp3ファイルが指定されるようになります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120223351.png" alt="f:id:iplcojp:20191120223351p:plain" title="f:id:iplcojp:20191120223351p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>すべて指定すると、ボタンに応じて曲が切り替わるようになります。</p> <h1>画像ビューア</h1> <p>ここから先は少し難しくなります。 <a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>の文法の一つ「リスト(配列)」が出てきます。 さらっと流しますが、理解のために<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>の初心者向けの本を読んでみてください。</p> <p class="codepen" data-height="458" data-theme-id="light" data-default-tab="result" data-user="ipl068" data-slug-hash="NWWoZYo" style="height: 458px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Cat Viewer"> <span>See the Pen <a href="https://codepen.io/ipl068/pen/NWWoZYo"> Cat Viewer</a> by Robert (<a href="https://codepen.io/ipl068">@ipl068</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <p><span style="font-size: 200%"><a href="https://codepen.io/ipl068/pen/XWWGJWN" target="_blank">未完成Verを開く</a></span></p> <p>この部分が「リスト」です。お気に入りの猫の写真をたくさんリストに入れてあります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120220900.png" alt="f:id:iplcojp:20191120220900p:plain" title="f:id:iplcojp:20191120220900p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>このリストを一覧表示できるようにしましょう。 下記のように記入します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120221348.png" alt="f:id:iplcojp:20191120221348p:plain" title="f:id:iplcojp:20191120221348p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これで、下記のように写真のリストが表示されるようになります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120221406.png" alt="f:id:iplcojp:20191120221406p:plain" title="f:id:iplcojp:20191120221406p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>v-for</code>が登場しました。 これはリストの内容(この場合はcats)を取り出して、その数画像を作ってくれるものです。 取り出された一つ分は「cat」に入ります。 srcに画像URLを入れることで、それぞれの画像を表示することができます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120221516.png" alt="f:id:iplcojp:20191120221516p:plain" title="f:id:iplcojp:20191120221516p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>では、縮小画像をクリックしたら、拡大画像を表示するように変更しましょう。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120222032.png" alt="f:id:iplcojp:20191120222032p:plain" title="f:id:iplcojp:20191120222032p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>拡大画像の方をzoomCatデータに紐付け、縮小画像をクリックしたときにzoomCatデータにcatを移します。 クリックして、画像が切り替わることを確認してください。</p> <p>一工夫として、選択されている縮小画像がわかるようにしたいです。下記のように書きます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120222345.png" alt="f:id:iplcojp:20191120222345p:plain" title="f:id:iplcojp:20191120222345p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>これは、zoomCatとcatの内容が同じであれば、その画像にactiveというクラスをつけるものです。やや慣れが必要ですが、使いこなすと下記のように選択されている画像がわかりやすくなります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120222437.png" alt="f:id:iplcojp:20191120222437p:plain" title="f:id:iplcojp:20191120222437p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h1>推奨書籍</h1> <p>本稿著者のおすすめ書籍をリストアップします。すべて初心者向けです。また、2019年現在で古い記載が無いかどうかもチェック済みです。</p> <ul> <li><a href="https://www.amazon.co.jp/dp/B076DDBL87/">JavaScript 1年生</a> <ul> <li>かなり噛み砕いて書かれた Webアプリ作成の入門書です。</li> </ul> </li> <li><a href="https://www.amazon.co.jp/dp/B07NWMVVQ1">知識ゼロからはじめるゆっくり・ていねいJavaScript</a> <ul> <li>前述の本よりもう少し事細かに幅広く書かれていますが、専門用語なども控えめで読みやすいです。</li> </ul> </li> <li><a href="https://www.amazon.co.jp/dp/B07KPTGZ4C">動かして学ぶ!Vue.js開発入門</a> <ul> <li>本稿で学習した内容を復習するのにピッタリな本です。前述の<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>本のどちらかを先に読むことをおすすめします。</li> </ul> </li> <li><a href="https://www.amazon.co.jp/dp/B07D9BYHMZ/">基礎から学ぶ Vue.js</a> <ul> <li>やや専門用語が増えており中級者向けですが、Vue.jsを仕事で使う上での知識がわかりやすく書かれています。</li> </ul> </li> </ul> iplcojp CodePenを使ってWeb開発を体験する 前編(HTML / CSS) hatenablog://entry/26006613468542642 2019-11-20T12:12:01+09:00 2019-11-21T13:35:10+09:00 HTML, CSS, JSを個別に学習してWebアプリを作れるようになるまでには、少し時間がかかります。 学ぶ内容にもよりますが、公開できるレベルのアプリを作ろうと考えれば、最低でも2ヶ月は必要でしょう。 基礎はもちろん大事ですが、目的地をはっきりさせて興味を持続させることも、挫折を防ぐ意味で大事なことです。 今回は、 基本をすべて飛ばした上 でいきなり Vue.js というフレームワークを使うチュートリアルを公開します。 本講座で概要を掴んだ上で、おすすめの書籍を購入いただき、基礎をキャッチアップしてみてください。 CodePen CodePenを開く CodePenとは、HTML, CSS… <p>HTML, <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>, JSを個別に学習してWebアプリを作れるようになるまでには、少し時間がかかります。</p> <p>学ぶ内容にもよりますが、公開できるレベルのアプリを作ろうと考えれば、最低でも2ヶ月は必要でしょう。</p> <p>基礎はもちろん大事ですが、目的地をはっきりさせて興味を持続させることも、挫折を防ぐ意味で大事なことです。</p> <p>今回は、<strong> 基本をすべて飛ばした上 </strong> でいきなり <code>Vue.js</code> という<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>を使う<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C1%A5%E5%A1%BC%A5%C8%A5%EA%A5%A2%A5%EB">チュートリアル</a>を公開します。 本講座で概要を掴んだ上で、おすすめの書籍を購入いただき、基礎をキャッチアップしてみてください。</p> <h1>CodePen</h1> <p><a href="https://codepen.io/" target="_blank">CodePenを開く</a></p> <p>CodePenとは、HTML, <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>, JSをブラウザ上で書いてすぐに変更を見ることができるサービスです。作ったものにURLを発行して公開することもできます。</p> <p>その手軽さとデザイン性の高さから、主に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%A5%C7%A5%B6%A5%A4%A5%CA%A1%BC">Webデザイナー</a>に人気のあるサービスです。</p> <h1>CodePenを使ってみよう</h1> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120112234.png" alt="f:id:iplcojp:20191120112234p:plain" title="f:id:iplcojp:20191120112234p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>CodePenにアクセスしたら、<code>Start Coding</code>をクリックしてください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120112338.png" alt="f:id:iplcojp:20191120112338p:plain" title="f:id:iplcojp:20191120112338p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>すると上記のような画面になります。試しに簡単なHTMLを書いてみましょう。</p> <h1>HTMLを書いてみよう</h1> <p>HTMLは左上に書きます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120113142.png" alt="f:id:iplcojp:20191120113142p:plain" title="f:id:iplcojp:20191120113142p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>左上に書いたHTMLが、左下にプレビューされます。 今回はdivタグを使いましたが、他にも色々タグがありますので、興味がある方は下記から学習してください。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.kanzaki.com%2Fdocs%2Fhtml%2Fall-elements.html" title="ごく簡単なHTMLの説明 -- 要素タイプ一覧" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.kanzaki.com/docs/html/all-elements.html">www.kanzaki.com</a></cite></p> <h1><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>を書いてみよう</h1> <p>書いたHTMLに飾り付けをしましょう。</p> <p>HTML</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;message&quot;</span><span class="synIdentifier">&gt;</span> Hello World <span class="synIdentifier">&lt;/</span><span class="synStatement">div</span><span class="synIdentifier">&gt;</span> </pre> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a></p> <pre class="code lang-css" data-lang="css" data-unlink><span class="synIdentifier">.message{</span> <span class="synType">background</span>: <span class="synConstant">chocolate</span>; <span class="synType">color</span>: <span class="synConstant">white</span>; <span class="synType">font-size</span>: <span class="synConstant">20px</span>; <span class="synType">padding</span>: <span class="synConstant">1em</span>; <span class="synType">text-align</span>: <span class="synConstant">center</span>; <span class="synType">width</span>: <span class="synConstant">8em</span>; <span class="synType">border-radius</span>: <span class="synConstant">0.5em</span>; <span class="synIdentifier">}</span> </pre> <p>上記をそれぞれHTML / <a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>の欄にコピペすると、下記のようになります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120114645.png" alt="f:id:iplcojp:20191120114645p:plain" title="f:id:iplcojp:20191120114645p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h1>サンプルの解説</h1> <p>HTMLと<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>は「クラス」というものを使って紐付けされています。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120114749.png" alt="f:id:iplcojp:20191120114749p:plain" title="f:id:iplcojp:20191120114749p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>この例で言うと、HTMLのDIVタグには「messageクラス」が付けられていて、それを目印に<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>が装飾を行います。<code>.message</code>というのは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>側でのクラス指定の記法です。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191120/20191120120204.png" alt="f:id:iplcojp:20191120120204p:plain" title="f:id:iplcojp:20191120120204p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>細かな装飾内容は上記のようになります。 もっと詳しく知りたい方は、下記のサイトを参考にしてください。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fwww.webdesignleaves.com%2Fpr%2Fcss%2Fcss_basic_06.html" title="CSS3 プロパティ(使い方とサンプル)/Web Design Leaves" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://www.webdesignleaves.com/pr/css/css_basic_06.html">www.webdesignleaves.com</a></cite></p> <p>下記のサイトで視覚的に色々試すことができます。</p> <p><a href="https://liveweave.com/cssgen/index.html" target="_blank">CSSGen</a></p> <h1>Demo</h1> <p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="ipl068" data-slug-hash="NWWooyw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Example"> <span>See the Pen <a href="https://codepen.io/ipl068/pen/NWWooyw"> CSS Example</a> by Robert (<a href="https://codepen.io/ipl068">@ipl068</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> <script async src="https://static.codepen.io/assets/embed/ei.js"></script> <p><a href="https://iplanning.hatenablog.jp/entry/2019/11/20/153702">後編に続きます。</a></p> iplcojp scoopを使って開発用PCをセットアップする hatenablog://entry/26006613467639999 2019-11-18T13:58:31+09:00 2019-11-18T16:02:00+09:00 インターンシップの開催にあたり、PCの開発環境のセットアップを手順化しました。 セットアップ対象 Windows 10 Pro 64bit セットアップするツール一覧 scoop git Node.js yarn VS Code Chrome Scoopでのインストール セットアップはscoopで行います。scoopを使う理由としては、管理者権限を必要としないためです。 (別のオプションとしてchocolateyを使うこともできます) https://scoop.sh/ まず、Powershellを起動します。Win + Rからファイル名を指定して実行、powershellを入力すると起動しま… <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A1%BC%A5%F3%A5%B7%A5%C3%A5%D7">インターンシップ</a>の開催にあたり、PCの開発環境のセットアップを手順化しました。</p> <h1>セットアップ対象</h1> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> 10 Pro 64bit</li> </ul> <h1>セットアップするツール一覧</h1> <ul> <li>scoop</li> <li>git</li> <li>Node.js</li> <li>yarn</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/VS%20Code">VS Code</a></li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a></li> </ul> <h1>Scoopでのインストール</h1> <p>セットアップはscoopで行います。scoopを使う理由としては、管理者権限を必要としないためです。 (別のオプションとしてchocolateyを使うこともできます)</p> <p><a href="https://scoop.sh/">https://scoop.sh/</a></p> <p>まず、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Powershell">Powershell</a>を起動します。<code>Win + R</code>からファイル名を指定して実行、<code>powershell</code>を入力すると起動します。</p> <p>下記のコマンドをコピーし、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Powershell">Powershell</a>ウィンドウにペーストします。 (右クリックでペーストすることができます) 改行で実行してください。</p> <pre class="code" data-lang="" data-unlink>Set-ExecutionPolicy RemoteSigned -scope CurrentUser</pre> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191118/20191118140851.png" alt="f:id:iplcojp:20191118140851p:plain" title="f:id:iplcojp:20191118140851p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Powershell">Powershell</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>を実行するための権限変更の確認が入りますので、<code>y</code>を押して承諾します。</p> <p>これでscoopがインストール可能になります。 その後、下記を実行します。</p> <pre class="code" data-lang="" data-unlink>iwr -useb get.scoop.sh | iex</pre> <p>scoopがインストールされます。 scoopのインストールが完了したら、下記のコマンドをすべてコピーし、実行してください。</p> <pre class="code" data-lang="" data-unlink>scoop install git scoop install nodejs scoop install yarn</pre> <p>これでNode.js関連のツールがすべてインストールされました。</p> <h1><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%E9">インストーラ</a>でのインストール</h1> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a>は、公式<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%E9">インストーラ</a>を使ってインストールしてください。 (scoopでのインストールも可能ですが、今回は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%C6%A5%AD%A5%B9%A5%C8%A5%E1%A5%CB%A5%E5%A1%BC">コンテキストメニュー</a>に「Codeで開く」を追加したいため)</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fcode.visualstudio.com%2Fdownload" title="Download Visual Studio Code - Mac, Linux, Windows" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://code.visualstudio.com/download">code.visualstudio.com</a></cite></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191118/20191118143326.png" alt="f:id:iplcojp:20191118143326p:plain" title="f:id:iplcojp:20191118143326p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>インストールオプションで「ショートカットを追加」「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%C6%A5%AD%A5%B9%A5%C8%A5%E1%A5%CB%A5%E5%A1%BC">コンテキストメニュー</a>に追加」をそれぞれチェックしてください。</p> <p>その後、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>もインストールを行います。</p> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.google.co.jp%2Fchrome%2F" title="Google Chrome ウェブブラウザ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.google.co.jp/chrome/">www.google.co.jp</a></cite></p> <p>以上でセットアップは完了です。</p> <h1><a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a>の日本語化&<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%C8%C4%A5%B5%A1%C7%BD">拡張機能</a>インストール</h1> <p>デスクトップに配置された<a class="keyword" href="http://d.hatena.ne.jp/keyword/Visual%20Studio%20Code">Visual Studio Code</a>を起動します。 このままだと英語なので、日本語化しましょう。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%C8%C4%A5%B5%A1%C7%BD">拡張機能</a>アイコンをクリックし、<code>japanese</code>と入力して検索します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191118/20191118152043.png" alt="f:id:iplcojp:20191118152043p:plain" title="f:id:iplcojp:20191118152043p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><code>Japanese Language Pack</code>が表示されますので、<code>install</code>を選択して下さい。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191118/20191118152224.png" alt="f:id:iplcojp:20191118152224p:plain" title="f:id:iplcojp:20191118152224p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>再起動が促されますので、<code>Restart Now</code>を選択します。</p> <h1>Live Serverのインストール</h1> <p>HTMLをプレビューするために、Live Server拡張をインストールします。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%C8%C4%A5%B5%A1%C7%BD">拡張機能</a>から、<code>liveserver</code>と入力し、Live Serverと表示されたらインストールしてください。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20191118/20191118152427.png" alt="f:id:iplcojp:20191118152427p:plain" title="f:id:iplcojp:20191118152427p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>以上で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a>設定完了です。</p> iplcojp Vue.js で麻雀聴牌判定ゲームを作る hatenablog://entry/10257846132606253978 2018-08-01T10:00:00+09:00 2018-08-01T10:00:02+09:00 2年目若手が新人研修のときに作ったC#の麻雀ゲームを Web版として移植してもらいました。 ゲームはスマートフォンでもプレイできるようになっておりますので、 ぜひ遊んでみてください! フレームワークにはVue.jsを利用しています。 また、聴牌判定ロジックにこだわりがあるとのことで、 ロジックについても解説記事を書いてもらいました。 ゲームを遊ぶ 清一色の練習をするためのゲームです。 こちらで遊べます。 Chromeで動作確認を行っております。IEなどのレガシーブラウザでは動作いたしません。 作成物概要 麻雀とは 34 種 136 牌を使用するゲームです。手牌 13 枚から始まり、1 枚引いて… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180731/20180731135837.png" alt="f:id:iplcojp:20180731135837p:plain" title="f:id:iplcojp:20180731135837p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>2年目若手が新人研修のときに作った<a class="keyword" href="http://d.hatena.ne.jp/keyword/C%23">C#</a>の麻雀ゲームを Web版として移植してもらいました。</p> <p>ゲームは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A1%BC%A5%C8%A5%D5%A5%A9%A5%F3">スマートフォン</a>でもプレイできるようになっておりますので、 ぜひ遊んでみてください!</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>にはVue.jsを利用しています。<br/> また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%B0%C7%D7">聴牌</a>判定ロジックにこだわりがあるとのことで、 ロジックについても解説記事を書いてもらいました。</p> <h1>ゲームを遊ぶ</h1> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%B6%B0%EC%BF%A7">清一色</a>の練習をするためのゲームです。</p> <p><strong><a href="https://iplanning.heteml.net/2018-majan/">こちらで遊べます。</a></strong></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>で動作確認を行っております。<a class="keyword" href="http://d.hatena.ne.jp/keyword/IE">IE</a>などのレガシーブラウザでは動作いたしません。</p> <h1>作成物概要</h1> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180731/20180731144406.png" alt="f:id:iplcojp:20180731144406p:plain" title="f:id:iplcojp:20180731144406p:plain" class="hatena-fotolife" itemprop="image"></span> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180731/20180731135837.png" alt="f:id:iplcojp:20180731135837p:plain" title="f:id:iplcojp:20180731135837p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h1>麻雀とは</h1> <p>34 種 136 牌を使用するゲームです。手牌 13 枚から始まり、1 枚引いては捨てるを繰り返して<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CF%C2%CE%BB">和了</a>(あがり)を競います。細かいルールは記載しきれないので省略します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180731/20180731135848.png" alt="f:id:iplcojp:20180731135848p:plain" title="f:id:iplcojp:20180731135848p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a href="http://sozai.7gates.net/docs/mahjong01/">画像拝借元</a></p> <h2>用語</h2> <p>手牌(てはい): 各プレイヤーの所有する牌。基本的に 13 枚。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%FD%C6%AC">雀頭</a>(じゃんとう): 同じ牌が 2 枚の組。<br/> 面子(めんつ): 同じ牌が 3 つの組、又は連続した数字が 3 つ揃ったもの。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CF%C2%CE%BB">和了</a>(あがり): <a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%FD%C6%AC">雀頭</a> 1 つ、面子 4 つを揃えた形。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%B0%C7%D7">聴牌</a>(てんぱい): あと 1 枚で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CF%C2%CE%BB">和了</a>形になる状態。<br/> 待ち牌(まちはい): <a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%B0%C7%D7">聴牌</a>の状態から<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CF%C2%CE%BB">和了</a>するための牌。待ち牌の個数で 1 面待ち、2 面待ちなどと表現する。<br/> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%B6%B0%EC%BF%A7">清一色</a>(ちんいつ、ちんいーそー): <a class="keyword" href="http://d.hatena.ne.jp/keyword/%CF%C2%CE%BB">和了</a>形が 1 色の牌のみで構成されているもの。</p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/%CF%C2%CE%BB">和了</a>形</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180731/20180731135936.png" alt="f:id:iplcojp:20180731135936p:plain" title="f:id:iplcojp:20180731135936p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%B0%C7%D7">聴牌</a>形</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180731/20180731135944.png" alt="f:id:iplcojp:20180731135944p:plain" title="f:id:iplcojp:20180731135944p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%B6%B0%EC%BF%A7">清一色</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%B0%C7%D7">聴牌</a>形</h2> <p>待ち牌を探すのが難しいのが特徴です。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180731/20180731135953.png" alt="f:id:iplcojp:20180731135953p:plain" title="f:id:iplcojp:20180731135953p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h1>作成背景</h1> <p>麻雀の牌の組み合わせに興味があったためです。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%B6%B0%EC%BF%A7">清一色</a>には 1~9 面待ちの手牌の組が存在します。</p> <p>n 面待ちは何通りあるのか、n 面待ちをランダムに表示して遊ぶにはどうするのがよいか、 というような思いから作成に至りました。</p> <h1>計算ロジック</h1> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%B0%C7%D7">聴牌</a>の判定方法や、手牌をどう格納するかといったことを記述してあります。</p> <h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/%C4%B0%C7%D7">聴牌</a>判定ロジック</h2> <p>13 枚の手牌に 1~9 の牌を加えて、それが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CF%C2%CE%BB">和了</a>の形となっているか判定する方法を使っています。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%FD%C6%AC">雀頭</a>となりうる牌を除外して、他の牌が全て面子の形となっていれば OK です。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%FD%C6%AC">雀頭</a>となりうる牌*2 ≡ 14 枚の牌の合計値 (mod 3) という性質も利用することで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%FD%C6%AC">雀頭</a>候補を絞れて無駄な計算を省けます。</p> <h2>n 面待ちランダム取得ロジック</h2> <p>予め 1~9 面待ちの全ての手牌の状態を 2 次元リストに格納しておき、定数時間で n 面待ち k 種目の手牌を取り出せるようにしました。</p> <p>「n 面待ちが出るまで手牌をランダムに生成し続ける方法はダメなのか?」という点については、 1,2 面待ち程度なら大丈夫ですが、7,8 面待ちになると時間がかかってしまうときがあります。 下の図は 13 枚の手牌が 1 色に染まっているときの n 面待ちの組み合わせ(種類)と個数です。</p> <table> <thead> <tr> <th style="text-align:center;"> 待ち数 </th> <th style="text-align:right;"> 種類 </th> <th style="text-align:right;"> 確率%(種類) </th> <th style="text-align:right;"> 個数 </th> <th style="text-align:right;"> 確率%(個数) </th> </tr> </thead> <tbody> <tr> <td style="text-align:center;"> ALL </td> <td style="text-align:right;"> 93,600 </td> <td style="text-align:right;"> 100.000 </td> <td style="text-align:right;"> 2,310,789,600 </td> <td style="text-align:right;"> 100.000 </td> </tr> <tr> <td style="text-align:center;"> 0 </td> <td style="text-align:right;"> 53,404 </td> <td style="text-align:right;"> 57.056 </td> <td style="text-align:right;"> 1,188,283,736 </td> <td style="text-align:right;"> 51.423 </td> </tr> <tr> <td style="text-align:center;"> 1 </td> <td style="text-align:right;"> 14,193 </td> <td style="text-align:right;"> 15.163 </td> <td style="text-align:right;"> 366,605,432 </td> <td style="text-align:right;"> 15.865 </td> </tr> <tr> <td style="text-align:center;"> 2 </td> <td style="text-align:right;"> 14,493 </td> <td style="text-align:right;"> 15.484 </td> <td style="text-align:right;"> 413,556,512 </td> <td style="text-align:right;"> 17.897 </td> </tr> <tr> <td style="text-align:center;"> 3 </td> <td style="text-align:right;"> 6,739 </td> <td style="text-align:right;"> 7.200 </td> <td style="text-align:right;"> 225,438,896 </td> <td style="text-align:right;"> 9.756 </td> </tr> <tr> <td style="text-align:center;"> 4 </td> <td style="text-align:right;"> 2,948 </td> <td style="text-align:right;"> 3.150 </td> <td style="text-align:right;"> 68,889,152 </td> <td style="text-align:right;"> 2.981 </td> </tr> <tr> <td style="text-align:center;"> 5 </td> <td style="text-align:right;"> 1,335 </td> <td style="text-align:right;"> 1.426 </td> <td style="text-align:right;"> 32,848,640 </td> <td style="text-align:right;"> 1.422 </td> </tr> <tr> <td style="text-align:center;"> 6 </td> <td style="text-align:right;"> 392 </td> <td style="text-align:right;"> 0.419 </td> <td style="text-align:right;"> 12,497,408 </td> <td style="text-align:right;"> 0.541 </td> </tr> <tr> <td style="text-align:center;"> 7 </td> <td style="text-align:right;"> 79 </td> <td style="text-align:right;"> 0.084 </td> <td style="text-align:right;"> 2,176,256 </td> <td style="text-align:right;"> 0.094 </td> </tr> <tr> <td style="text-align:center;"> 8 </td> <td style="text-align:right;"> 16 </td> <td style="text-align:right;"> 0.017 </td> <td style="text-align:right;"> 231,424 </td> <td style="text-align:right;"> 0.010 </td> </tr> <tr> <td style="text-align:center;"> 9 </td> <td style="text-align:right;"> 1 </td> <td style="text-align:right;"> 0.001 </td> <td style="text-align:right;"> 262,144 </td> <td style="text-align:right;"> 0.011 </td> </tr> </tbody> </table> <p>この図より、ランダムに手牌を生成して 7,8 面待ちを得るためには、1 万回ほどの試行を必要とするのがわかります。 運が悪いときは 10 万回手牌を生成しても得られないときがあります。</p> <p>「手牌リストに格納した場合、メモリ使用量は大丈夫か?」という疑問が湧きますが、これについては400KB あれば足ります。先ほどの図から、種類は全部で 93600 通りです。手牌の状態は 4byte で表現可能(後述)なため、使用するメモリ(概算)は 93600*4 ≒ 365KB で済みます。</p> <p>もし仮に 1,2 面待ちの種類が多く、メモリを占有しすぎてしまう場合は、3~9 面待ちだけをリストに格納して、他はランダムに生成に期待する方法が良いと思います。</p> <h2>手牌の格納方法</h2> <p>13 枚の牌を表現する方法です。副露した牌については考慮していませんので注意してください。</p> <ol> <li><strong>純粋にリストで表現</strong><br/> 手牌の i 番目の数字を list[i]に格納するシンプルな方法です。必要なリストのサイズは 13 です。</li> <li><strong>各牌の個数をリストで格納</strong><br/> 数字が i の牌の個数を list[i]に格納する方法です。必要なリストのサイズは 9 ですが、手牌の並びの情報は失われます。</li> <li><strong>各牌の個数を int 型(32bit)に詰める</strong><br/> 方法 2 の各牌の個数をリストで格納する方法において、list に格納される数字は 0~4 のみで、使用する bit サイズが 3 であるのがわかります。そのため、1~3bit 目に 1 の牌の個数、4~6bit 目に 2 の牌の個数 ... 25~27bit 目に 9 の牌の個数とすれば、int 型で格納できることになります。本 Web アプリではこの格納方法を使っています。</li> <li><strong>手牌+待ち牌を int 型で表現</strong><br/> 方法 3 とは別のやり方で、ソート済の手牌を表現でき、且つ使用 bit 領域を 21 にまで減らせます。 牌の個数分 1 を並べて、数字の区切り部分を 0 とすれば OK です。例えば <code>1112355666889</code> という手牌についてみてみます。数字の区切りを"|"で表すと <code>111|2|3||55|666||88|9</code> となります。数字を全て 1 に、"|"を 0 に変換すると <code>111010100110111001101</code> になります。<br/> 待ち牌は 9bit あれば表現可能(その牌の番号の bit を立てる)です。残りの 11bit 部分を使えば待ち牌の情報も加わった手牌を int 型で表せます。</li> </ol> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>の一部を掲載します。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synStatement">const</span> TILE_SUM_BLOCK_BIT = 3; <span class="synComment">//同じ牌の合計を記録するためのbit領域</span> <span class="synStatement">const</span> TILE_SUM_MASK = 0b111; <span class="synComment">//同じ牌の合計を記録するためのbit領域(mask用)</span> <span class="synStatement">class</span> TenpaiJudge <span class="synIdentifier">{</span> constructor() <span class="synIdentifier">{</span> <span class="synIdentifier">}</span> <span class="synComment">//[0, 1, 4, 1, 1] のような手牌をsumTile形式にする(0~2bit目で牌1の個数、3~5bit目で牌2の個数、・・・24~26bit目で牌9の個数)</span> <span class="synComment">// 同じ牌が5個以上ある場合はreturn -1</span> toSumTile(aryTile) <span class="synIdentifier">{</span> <span class="synIdentifier">let</span> sumTile = 0; <span class="synIdentifier">let</span> sumTileList = <span class="synIdentifier">[]</span>; <span class="synComment">//i+1の牌が何個あるか</span> <span class="synStatement">for</span> (<span class="synIdentifier">let</span> i = 0; i &lt; 9; i++) sumTileList.push(0); <span class="synStatement">for</span> (<span class="synIdentifier">let</span> i = 0; i &lt; aryTile.length; i++) <span class="synIdentifier">{</span> <span class="synIdentifier">let</span> tileNum = aryTile<span class="synIdentifier">[</span>i<span class="synIdentifier">]</span>; sumTileList<span class="synIdentifier">[</span>tileNum<span class="synIdentifier">]</span>++; <span class="synStatement">if</span> (sumTileList<span class="synIdentifier">[</span>tileNum<span class="synIdentifier">]</span> &gt; 4) <span class="synStatement">return</span> -1; sumTile += 1 &lt;&lt; (tileNum * TILE_SUM_BLOCK_BIT); <span class="synIdentifier">}</span> <span class="synStatement">return</span> sumTile; <span class="synIdentifier">}</span> <span class="synComment">//sumTileは 3bitを1ブロックとして、</span> <span class="synComment">//0~2bit目で牌1の個数、3~5bit目で牌2の個数、・・・24~26bit目で牌9の個数を表す</span> <span class="synComment">//戻り値は和了牌、和了可能bitを立てる(牌1で和了可のときは0bit目、・・・9で和了可のときは8bit目を立てる)</span> calcFullFlashWinTile(sumTile) <span class="synIdentifier">{</span> <span class="synComment">//筋合計mod3算出</span> <span class="synIdentifier">let</span> sujiMod3 = <span class="synIdentifier">[</span>0, 0, 0<span class="synIdentifier">]</span>; <span class="synStatement">for</span> (<span class="synIdentifier">let</span> suji = 0; suji &lt; 3; suji++) <span class="synIdentifier">{</span> <span class="synIdentifier">let</span> sujiSum = 0; <span class="synStatement">for</span> (<span class="synIdentifier">let</span> shiftBlock = suji; shiftBlock &lt; 9; shiftBlock += TILE_SUM_BLOCK_BIT) <span class="synIdentifier">{</span> sujiSum += (sumTile &gt;&gt; (shiftBlock * TILE_SUM_BLOCK_BIT)) &amp; TILE_SUM_MASK; <span class="synIdentifier">}</span> sujiMod3<span class="synIdentifier">[</span>suji<span class="synIdentifier">]</span> = sujiSum % 3; <span class="synIdentifier">}</span> <span class="synComment">//牌の数字合計mod3</span> <span class="synIdentifier">let</span> numSumMod3 = (sujiMod3<span class="synIdentifier">[</span>1<span class="synIdentifier">]</span> + sujiMod3<span class="synIdentifier">[</span>2<span class="synIdentifier">]</span> * 2) % 3; <span class="synIdentifier">let</span> winTile = 0;<span class="synComment">//和了牌</span> <span class="synComment">//sumTileにmayWintileを加えて和了形か判定</span> <span class="synComment">//手牌14枚に対し、頭mod3は必然に決まる</span> <span class="synStatement">for</span> (<span class="synIdentifier">let</span> mayWintile = 0; mayWintile &lt; 9; mayWintile++) <span class="synIdentifier">{</span> <span class="synComment">//加える牌が5枚目のときはスルー</span> <span class="synStatement">if</span> (((sumTile &gt;&gt; (mayWintile * TILE_SUM_BLOCK_BIT)) &amp; TILE_SUM_MASK) === 4) <span class="synStatement">continue</span>; <span class="synIdentifier">let</span> addedSumTile = sumTile + (1 &lt;&lt; (TILE_SUM_BLOCK_BIT * mayWintile)); <span class="synIdentifier">let</span> headTileMod3 = (12 - numSumMod3 - mayWintile) % 3; <span class="synStatement">for</span> (<span class="synIdentifier">let</span> headTile = headTileMod3; headTile &lt; 9; headTile += 3) <span class="synIdentifier">{</span> <span class="synComment">// 頭候補の牌が2枚未満のとき, 何もしない</span> <span class="synStatement">if</span> (((addedSumTile &gt;&gt; (headTile * TILE_SUM_BLOCK_BIT)) &amp; TILE_SUM_MASK) &lt; 2) <span class="synStatement">continue</span>; <span class="synComment">//14牌から頭を抜く</span> <span class="synIdentifier">let</span> addedSumTile_remove_head = addedSumTile - (2 &lt;&lt; (headTile * TILE_SUM_BLOCK_BIT)); <span class="synStatement">if</span> (<span class="synIdentifier">this</span>.isMentu(addedSumTile_remove_head)) <span class="synIdentifier">{</span> winTile |= 1 &lt;&lt; mayWintile; <span class="synStatement">break</span>; <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> <span class="synComment">//和了牌無なら七対子判定</span> <span class="synStatement">if</span> (winTile === 0) <span class="synIdentifier">{</span> <span class="synComment">//0枚牌、1枚牌、・・・4枚牌は何個か</span> <span class="synIdentifier">let</span> nPerSum = <span class="synIdentifier">[</span>0, 0, 0, 0, 0<span class="synIdentifier">]</span>; <span class="synIdentifier">let</span> mayWintile; <span class="synStatement">for</span> (<span class="synIdentifier">let</span> i = 0; i &lt; 9; i++) <span class="synIdentifier">{</span> <span class="synIdentifier">let</span> maisuu = (sumTile &gt;&gt; (i * TILE_SUM_BLOCK_BIT)) &amp; TILE_SUM_MASK; nPerSum<span class="synIdentifier">[</span>maisuu<span class="synIdentifier">]</span>++; <span class="synStatement">if</span> (maisuu === 1) mayWintile = i; <span class="synIdentifier">}</span> <span class="synStatement">if</span> (nPerSum<span class="synIdentifier">[</span>1<span class="synIdentifier">]</span> === 1 &amp;&amp; nPerSum<span class="synIdentifier">[</span>2<span class="synIdentifier">]</span> === 6) winTile |= 1 &lt;&lt; mayWintile; <span class="synIdentifier">}</span> <span class="synStatement">return</span> winTile; <span class="synIdentifier">}</span> <span class="synComment">//端牌から消していく、sumTileもシフトする</span> isMentu(sumTile) <span class="synIdentifier">{</span> <span class="synStatement">while</span> (sumTile &gt; 0) <span class="synIdentifier">{</span> <span class="synIdentifier">let</span> termSum = sumTile &amp; TILE_SUM_MASK; <span class="synStatement">if</span> (termSum === 0 || termSum === 3) <span class="synIdentifier">{</span> sumTile &gt;&gt;= TILE_SUM_BLOCK_BIT; <span class="synStatement">continue</span>; <span class="synIdentifier">}</span> <span class="synIdentifier">let</span> nextSum = (sumTile &gt;&gt; TILE_SUM_BLOCK_BIT) &amp; TILE_SUM_MASK; <span class="synIdentifier">let</span> afterNextSum = (sumTile &gt;&gt; (TILE_SUM_BLOCK_BIT * 2)) &amp; TILE_SUM_MASK; <span class="synStatement">if</span> (termSum === 2) <span class="synIdentifier">{</span> <span class="synStatement">if</span> (nextSum &gt;= 2 &amp;&amp; afterNextSum &gt;= 2) sumTile -= (2 &lt;&lt; TILE_SUM_BLOCK_BIT) + (2 &lt;&lt; (TILE_SUM_BLOCK_BIT * 2)); <span class="synStatement">else</span> <span class="synStatement">return</span> <span class="synConstant">false</span>; <span class="synIdentifier">}</span> <span class="synComment">// if (termSum === 1 || termSum === 4)</span> <span class="synStatement">else</span> <span class="synIdentifier">{</span> <span class="synStatement">if</span> (nextSum &gt;= 1 &amp;&amp; afterNextSum &gt;= 1) sumTile -= (1 &lt;&lt; TILE_SUM_BLOCK_BIT) + (1 &lt;&lt; (TILE_SUM_BLOCK_BIT * 2)); <span class="synStatement">else</span> <span class="synStatement">return</span> <span class="synConstant">false</span>; <span class="synIdentifier">}</span> sumTile &gt;&gt;= TILE_SUM_BLOCK_BIT; <span class="synIdentifier">}</span> <span class="synStatement">return</span> <span class="synConstant">true</span>; <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> </pre> <h1>Vue.jsについて</h1> <p>今回はVue.jsで初めてアプリを作成するということもあり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/CDN">CDN</a>版Vue.jsを利用することを選択しました。</p> <p>アプリケーションの分割方法は、 一般的に推奨されている<a href="https://jp.vuejs.org/v2/guide/single-file-components.html">Single File Component</a>は利用せず、 一つの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>を一つのJSファイルに記述する方式を選択しました。</p> <p>基本的には下記のように記述します。</p> <pre class="code lang-javascript" data-lang="javascript" data-unlink>Vue.component(<span class="synConstant">&quot;my-component&quot;</span>, <span class="synIdentifier">{</span> template: ` &lt;div&gt; &lt;!-- ここにテンプレートを記載する --&gt; &lt;/div&gt; `, methods: <span class="synIdentifier">{</span> <span class="synComment">//</span><span class="synTodo">TODO</span> <span class="synIdentifier">}</span>, mounted() <span class="synIdentifier">{</span> <span class="synComment">//</span><span class="synTodo">TODO</span> <span class="synIdentifier">}</span>, data() <span class="synIdentifier">{</span> <span class="synStatement">return</span> <span class="synIdentifier">{</span> <span class="synComment">// </span><span class="synTodo">TODO</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span> <span class="synIdentifier">}</span>) </pre> <p>以上のように記載したテンプレートを、new Vue()をしている<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>より前に読み込むことで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>を利用することができます。</p> <pre class="code lang-html" data-lang="html" data-unlink> <span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">&quot;src/my-component.js&quot;</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span> </pre> <p>この方式の利点としては、下記が挙げられます。</p> <ul> <li>index.htmlの肥大化が防げる</li> <li>プレーンな<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>として記述できること</li> <li>テンプレートと<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>を同じファイル内に書くと、Single File Componentと似た構成になるため、<a class="keyword" href="http://d.hatena.ne.jp/keyword/SFC">SFC</a>採用時に移行がスムーズになること</li> </ul> <h1>結果</h1> <p>Vue を使うことで画像表示やイベント処理を手軽に記述できました。</p> <p><strong><a href="https://iplanning.heteml.net/2018-majan/">こちらで遊べます。</a></strong></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A1%BC%A5%C8%A5%D5%A5%A9%A5%F3">スマートフォン</a>では横画面でのプレイを推奨します。</p> <h1><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a></h1> <p><a href="https://iplanning.heteml.net/2018-majan/jsmajan.zip">ここからダウンロードできます</a></p> <h1>感想</h1> <p>計算ロジックにこだわりすぎて、見た目や使いやすさに力を入れられていないです。あと Vue は便利です。</p> iplcojp SVGとVue.jsでグラフコンポーネントを作成する hatenablog://entry/17391345971629554476 2018-03-28T10:00:00+09:00 2018-03-28T10:00:00+09:00 一年目の若手エンジニアに、データビジュアライゼーションのトレーニングを兼ねて、SVGでグラフを作ってもらいました。 作成物概要 総務省統計局の平成29年11月時点の人口データを元に各年齢ごとの人口を男女別にグラフを作成しました。 横軸に年齢(5歳ごとの分類)、縦軸に人数(単位:千人)で男女別で表示しています。男性を青、女性を赤、合計を灰色に設定しています。 また、縦軸最大値と人口の最大値をあわせたり、グラフの大きさをウィンドウサイズ丁度に表示されるように作成しました。 SVGの基本的な使い方 SVGタグの中にSVG要素を書いていきます。具体的には以下の通りです。 <svg viewbox="0… <p>一年目の若手エンジニアに、データビジュアライゼーションのトレーニングを兼ねて、<a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a>でグラフを作ってもらいました。</p> <h1>作成物概要</h1> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180326/20180326113827.png" alt="f:id:iplcojp:20180326113827p:plain" title="f:id:iplcojp:20180326113827p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a href="http://www.stat.go.jp/data/jinsui/">総務省統計局</a>の平成29年11月時点の人口データを元に各年齢ごとの人口を男女別にグラフを作成しました。</p> <p>横軸に年齢(5歳ごとの分類)、縦軸に人数(単位:千人)で男女別で表示しています。<br>男性を青、女性を赤、合計を灰色に設定しています。</p> <p>また、縦軸最大値と人口の最大値をあわせたり、グラフの大きさをウィンドウサイズ丁度に表示されるように作成しました。</p> <h1><a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a>の基本的な使い方</h1> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a>タグの中に<a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a>要素を書いていきます。具体的には以下の通りです。</p> <pre class="code" data-lang="" data-unlink>&lt;svg viewbox=&#34;0 0 400 500&#34; width=400 height=500&gt; &lt;!-- ここに書きたい物を書いていく --&gt; &lt;/svg&gt;</pre> <h1>viewboxとは?</h1> <p>描画領域を"x y width height"で指定する事が出来ます。</p> <p>xとyで描画位置を指定(描画領域の左上部分というイメージ)、widthとheightで長さを決定します。</p> <h1><a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a>内に描画出来る要素</h1> <ul> <li>circle(円) <ul> <li>中心座標(cx,cy)と半径rを指定して作成する</li> </ul> </li> <li>ellipse(楕円) <ul> <li>中心座標(cx,cy)とx方向への長さrx、y方向への長さryを指定して作成する</li> </ul> </li> <li>rect(四角形) <ul> <li>座標x,yから横にwidth、縦にheight分伸ばして作成する <ul> <li>rx,ry(楕円と同じような考え)で指定も可能</li> </ul> </li> </ul> </li> <li>line(直線) <ul> <li>(x1,y1)と(x2,y2)の2つの座標から直線を作成する</li> </ul> </li> <li>polyline(連続した直線) <ul> <li>pointsを指定して作成。 "x1 y1 x2 y2 ... xn yn" <ul> <li>points内の要素が偶数になるよう注意、要素が奇数になると最後のy座標の値がなく、バグの原因になる。</li> </ul> </li> </ul> </li> <li>polygon(多角形) <ul> <li>polylineと同様pointsを指定して作成 <ul> <li>始点と終点座標を一緒にする必要はない(始点と終点に直線が描画され多角形になる)</li> </ul> </li> </ul> </li> <li>text(テキスト) <ul> <li>座標(x,y)にフォント名(font-family)と文字の大きさ(font-size)を指定して作成 <ul> <li>text-anchorで文字の揃え方(左、右、中央揃え)やdominant-baselineで高さ位置の指定なども可能</li> </ul> </li> </ul> </li> <li>path(パス、曲線) <ul> <li>始点と終点を設定する。その間に制御点を加えることで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D9%A5%B8%A5%A8%B6%CA%C0%FE">ベジエ曲線</a>を描く事が可能 <ul> <li>大体の図形はpathで描けるが、複雑になりやすいため簡単な図形は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%E5%B5%AD">上記</a>の要素を書いた方がいい</li> </ul> </li> </ul> </li> </ul> <p>主要な要素は<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%E5%B5%AD">上記</a>の通りですが、他にも様々な要素を使うことが出来ます。詳しくは<a href="https://developer.mozilla.org/ja/docs/Web/SVG">MDNのリファレンス</a>をチェックして下さい。</p> <h1>注意事項</h1> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/svg">svg</a>要素内では、html要素は基本的に使えなくなります <ul> <li><code>div</code>でグループ分け出来ないため、<code>g</code>要素でグループ分けを行います。 <ul> <li>title属性を指定して、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C4%A1%BC%A5%EB%A5%C1%A5%C3%A5%D7">ツールチップ</a>の表示を試みましたが、不可能でした。</li> </ul> </li> <li>HTML要素をどうしても使いたい場合は、foreignObject要素内で利用します。 <ul> <li>折り返しテキストを表現する用途でよく使われます。<a href="http://cocu.hatenablog.com/entry/2014/01/14/214917">参考サイト</a></li> </ul> </li> </ul> </li> </ul> <h1>作成物</h1> <p><a href="https://iplanning.heteml.net/2018-svg/">https://iplanning.heteml.net/2018-svg/</a></p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%E5%B5%AD">上記</a>ページで閲覧する事ができます。</li> </ul> <h1>グラフ描画部の実装ポイント</h1> <p>棒グラフの描画部は下記のようになっています。</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span>g<span class="synIdentifier"> v-</span><span class="synType">for</span><span class="synIdentifier">=</span><span class="synConstant">&quot;(data, index) in datas&quot;</span><span class="synIdentifier"> :key=</span><span class="synConstant">&quot;index&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span>rect<span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;totalPopulation&quot;</span><span class="synIdentifier"> :x=</span><span class="synConstant">&quot;setGraphX(index)&quot;</span><span class="synIdentifier"> :y=</span><span class="synConstant">&quot;setGraphY(data[0])&quot;</span><span class="synIdentifier"> :</span><span class="synType">width</span><span class="synIdentifier">=</span><span class="synConstant">&quot;rectScaleWidth()&quot;</span><span class="synIdentifier"> :</span><span class="synType">height</span><span class="synIdentifier">=</span><span class="synConstant">&quot;rectScaleHeight(data[0])&quot;</span><span class="synIdentifier">&gt;&lt;/</span>rect<span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span>rect<span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;malePopulation&quot;</span><span class="synIdentifier"> :x=</span><span class="synConstant">&quot;setGraphX(index)&quot;</span><span class="synIdentifier"> :y=</span><span class="synConstant">&quot;setGraphY(data[1])&quot;</span><span class="synIdentifier"> :</span><span class="synType">width</span><span class="synIdentifier">=</span><span class="synConstant">&quot;rectScaleWidth()&quot;</span><span class="synIdentifier"> :</span><span class="synType">height</span><span class="synIdentifier">=</span><span class="synConstant">&quot;rectScaleHeight(data[1])&quot;</span><span class="synIdentifier">&gt;&lt;/</span>rect<span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span>rect<span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;femalePopulation&quot;</span><span class="synIdentifier"> :key=</span><span class="synConstant">&quot;index&quot;</span><span class="synIdentifier"> :x=</span><span class="synConstant">&quot;setGraphX(index)&quot;</span><span class="synIdentifier"> :y=</span><span class="synConstant">&quot;setGraphY(data[2])&quot;</span><span class="synIdentifier"> :</span><span class="synType">width</span><span class="synIdentifier">=</span><span class="synConstant">&quot;rectScaleWidth()&quot;</span><span class="synIdentifier"> :</span><span class="synType">height</span><span class="synIdentifier">=</span><span class="synConstant">&quot;rectScaleHeight(data[2])&quot;</span><span class="synIdentifier">&gt;&lt;/</span>rect<span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span>text<span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;axisTextX&quot;</span><span class="synIdentifier"> v-if=</span><span class="synConstant">&quot;textDataX(index)&quot;</span><span class="synIdentifier"> :x=</span><span class="synConstant">&quot;setGraphX(index)&quot;</span><span class="synIdentifier"> :y=</span><span class="synConstant">&quot;graphHeight&quot;</span><span class="synIdentifier">&gt;</span>{{textDataX(index)}}<span class="synIdentifier">&lt;/</span>text<span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span>g<span class="synIdentifier">&gt;</span> </pre> <p>x, y, width, heightを計算する部分は、methods内に定義します。</p> <pre class="code" data-lang="" data-unlink>methods: { setGraphX (index) { return (index * this.graphWidth / this.datas.length) }, setGraphY (data) { return this.graphHeight - data / this.maxData * this.graphHeight }, rectScaleWidth () { return this.graphWidth / this.datas.length }, // グラフ横幅 rectScaleHeight (data) { return data / this.maxData * this.graphHeight }, ... }</pre> <p>maxDataは表示データの最大値で、これをもとにデータ表示範囲を自動的に調整しています。</p> <h1>おまけ</h1> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180327/20180327173540.png" alt="f:id:iplcojp:20180327173540p:plain" title="f:id:iplcojp:20180327173540p:plain" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>作成物内に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DD%A5%B1%A5%E2%A5%F3">ポケモン</a>ステータスをグラフに示したものも合わせて作成しました。 <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DD%A5%B1%A5%E2%A5%F3">ポケモン</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BC%EF%C2%B2%C3%CD">種族値</a>から2種類データを選択し、x,y軸に対応させて表示してあります。</li> <li>タイプごとの表示やマウスカーソルを当てたときにデータが表示される機能などを実装しました。</li> <li>表示データは<a href="https://github.com/veekun/pokedex">pokedex</a>の公開データ(MIT)を利用しました。</li> </ul> </li> </ul> <h1>おまけの実装ポイント</h1> <p>グラフ表示に加え、データの絞込や軸ごとの表示データの選択機能も付けました。 <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180327/20180327175330.png" alt="f:id:iplcojp:20180327175330p:plain" title="f:id:iplcojp:20180327175330p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>グラフ表示部は下記のような実装になっています。</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synIdentifier">&lt;</span>g<span class="synIdentifier"> v-</span><span class="synType">for</span><span class="synIdentifier">=</span><span class="synConstant">&quot;data in datas&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span>g<span class="synIdentifier"> v-</span><span class="synType">for</span><span class="synIdentifier">=</span><span class="synConstant">&quot;type in data.type&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span>g<span class="synIdentifier"> v-if=</span><span class="synConstant">&quot;selectType === 'all'|selectType === type|selectType2 === type&quot;</span><span class="synIdentifier"> @mouseenter=</span><span class="synConstant">&quot;pokemonView(data)&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span>circle<span class="synIdentifier"> :</span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;type&quot;</span><span class="synIdentifier"> :cx=</span><span class="synConstant">&quot;setGraphX(data)&quot;</span><span class="synIdentifier"> :cy=</span><span class="synConstant">&quot;setGraphY(data)&quot;</span><span class="synIdentifier"> :r=</span><span class="synConstant">&quot;circleScale&quot;</span><span class="synIdentifier"> :</span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">&quot;data.name&quot;</span><span class="synIdentifier"> /&gt;</span> <span class="synIdentifier">&lt;/</span>g<span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span>g<span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span>g<span class="synIdentifier">&gt;</span> </pre> <p>計算部は下記の通りです。マウスカーソルを重ねた時には、該当する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DD%A5%B1%A5%E2%A5%F3">ポケモン</a>の名称やパラメータを画面下部に表示します。</p> <pre class="code" data-lang="" data-unlink>methods: { setGraphX (data) { return data[this.graphStats.x] * this.graphWidth / this.maxX }, setGraphY (data) { return this.graphHeight - data[this.graphStats.y] * this.graphHeight / this.maxY }, pokemonView (data) { this.viewStr = &#39;名前: &#39; + data.name + &#39; &#39; + this.status[this.graphStats.x] + &#39; : &#39; + data[this.graphStats.x] + &#39; &#39; + this.status[this.graphStats.y] + &#39;: &#39; + data[this.graphStats.y] return } },</pre> <h1>終わりに</h1> <p>特別なグラフライブラリを使用せず、Vue.jsと<a class="keyword" href="http://d.hatena.ne.jp/keyword/SVG">SVG</a>のみでグラフを構築しました。</p> <p>絞込UIに関してもVue.jsで実装できるため、UIとグラフの連携もスムーズになるなどの利点があるかと思います。</p> <h1>参考ページ</h1> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fja%2Fdocs%2FWeb%2FSVG" title="SVG" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://developer.mozilla.org/ja/docs/Web/SVG">developer.mozilla.org</a></cite></p> iplcojp Java製のシューティングゲームをTypeScriptでWebに移植する hatenablog://entry/17391345971621265096 2018-03-06T08:00:00+09:00 2018-03-06T14:42:12+09:00 10年前にIPL社員が作ったJava製のシューティングゲームを、Web技術を使ってリメイクしました。 また、JavaからTypeScriptへの移植のポイントについても記載します。 何はともあれゲームを遊ぶ 以下のURLからプレイできます。 https://iplanning.heteml.net/2018-shooting/ Chrome, Firefox, Edgeブラウザで動作確認しております。スマートフォンには非対応です。 操作方法 スペースキー:ゲーム開始&弾を撃つ カーソルキー:上下左右に移動 ハイスコアはお使いのブラウザ内(LocalStorage)に記録されます。 経緯 アイプ… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180302/20180302203529.gif" alt="f:id:iplcojp:20180302203529g:plain" title="f:id:iplcojp:20180302203529g:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>10年前にIPL社員が作った<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>製の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%E5%A1%BC%A5%C6%A5%A3%A5%F3%A5%B0%A5%B2%A1%BC%A5%E0">シューティングゲーム</a>を、Web技術を使ってリメイクしました。 また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>からTypeScriptへの移植のポイントについても記載します。</p> <h1>何はともあれゲームを遊ぶ</h1> <p>以下のURLからプレイできます。</p> <p><a href="https://iplanning.heteml.net/2018-shooting/">https://iplanning.heteml.net/2018-shooting/</a></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Chrome">Chrome</a>, <a class="keyword" href="http://d.hatena.ne.jp/keyword/Firefox">Firefox</a>, Edgeブラウザで動作確認しております。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A1%BC%A5%C8%A5%D5%A5%A9%A5%F3">スマートフォン</a>には非対応です。</p> <pre class="code" data-lang="" data-unlink>操作方法 スペースキー:ゲーム開始&弾を撃つ カーソルキー:上下左右に移動</pre> <p>ハイスコアはお使いのブラウザ内(LocalStorage)に記録されます。</p> <h1>経緯</h1> <p>アイプランニングでは、毎年新人に自由課題を課しています。</p> <p>ゲームやカロリー計算機など、人によって作るものはそれぞれですが、 10年前に筆者は、当時それなりに新しい技術だった<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>とAWT(当時既にSwingはありましたが)を使って、 簡単な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%E5%A1%BC%A5%C6%A5%A3%A5%F3%A5%B0%A5%B2%A1%BC%A5%E0">シューティングゲーム</a>を作りました。</p> <p>旧版は<a href="https://www.ipl.co.jp/item/java-shooting-game.html">こちら</a>で記事にしています。</p> <p>見た目は下記のような、かなり寂しいものになっています。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180302/20180302194949.jpg" alt="f:id:iplcojp:20180302194949j:plain" title="f:id:iplcojp:20180302194949j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>10年の時を経て、今や<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>の方が当時の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>よりも高速に動作する時代です。 <b><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>はブラウザなどの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%EB%A5%C1%A5%D7%A5%E9%A5%C3%A5%C8%A5%D5%A5%A9%A1%BC%A5%E0">マルチプラットフォーム</a><a href="#f-841706a2" name="fn-841706a2" title="CordovaやElectronなどを使うことで、ネイティブアプリケーションのようなものを作ることが出来ます">*1</a>で動作する</b>という利点があるため、 弊社でも<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>から<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>への移植案件を度々頂くことがあります。</p> <p>一方で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>は良くも悪くも柔軟なところがあり、バグを作り込みやすく、大規模な開発には向いていません。</p> <p>これに対処するため、弊社で採用している言語が「TypeScript」です。</p> <h1>TypeScriptとは</h1> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.typescriptlang.org%2F" title="TypeScript - JavaScript that scales." class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://www.typescriptlang.org/">www.typescriptlang.org</a></cite></p> <p>TypeScriptは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>すると<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>を出力する言語です。 (このような言語を一般的にAltJSと呼びます。同種の言語として、ElmやFlowなども人気です)</p> <p><b>TypeScriptの最も強力で便利な機能は、型チェックです。</b></p> <p>TypeScriptでは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>時に型チェックを行なうことが出来ます。 最も簡単なサンプルを下記に例示します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180305/20180305202844.png" alt="f:id:iplcojp:20180305202844p:plain" title="f:id:iplcojp:20180305202844p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>例示したコードでは、<code>name</code>引数に<code>string</code>型を指定しています。 ここで、<code>name</code>引数に数値を指定すると、型が想定と異なるために、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%EB">コンパイル</a>時にエラーになります。 また、<code>name</code>に<code>null</code>や<code>undefined</code>が来ることも防ぐ事が出来ます。</p> <p><b>このTypeScript<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%E9">コンパイラ</a>の強力な型チェック機能により、開発者はより安全なコードを書くことが出来ます。</b></p> <p>移植作業は、大きなひとかたまりのコードを移植して、エラーを直す作業の繰り返しなので、賢い<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%D1%A5%A4%A5%E9">コンパイラ</a>は非常に頼りになる存在です。</p> <h1>TypeScriptは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>開発者におすすめ</h1> <p>アイプランニングには、多くの<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>経験者が在籍しています。 その為、<b><a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>経験者にとって学習が容易である点も重要</b>です。</p> <p>その点、TypeScriptは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>からの移行もスムーズです。理由としては下記が挙げられます。</p> <ul> <li>TypeScriptは<a class="keyword" href="http://d.hatena.ne.jp/keyword/C%23">C#</a>に似ています<a href="#f-369c2767" name="fn-369c2767" title="C#と言語デザイナーが同じという経緯があります。実際にはTypeScriptはJavaScriptの拡張として作られているので、あくまでスタイルが似ているということです">*2</a>が、<a class="keyword" href="http://d.hatena.ne.jp/keyword/C%23">C#</a>に近い言語である<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>にもある程度文法が似ています。</li> <li>クラス<a href="#f-6f3a4216" name="fn-6f3a4216" title="JavaScriptはプロトタイプベースの言語であり、JavaScriptやTypeScriptのクラスシンタックスはプロトタイプのシンタックスシュガーです。Javaと同じ動作はしません。詳しくはJavaScriptのプロトタイプについて調べてみて下さい">*3</a>やインターフェースがあるため、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>のフィーリングで書くことが出来ます。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a>を使うことで、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Eclipse">Eclipse</a>のような賢い補完やリファクタ機能を使う事ができます<a href="#f-bfc3b7f6" name="fn-bfc3b7f6" title="これ自体はVSCodeの機能というわけではなく、TypeScriptが備えているLanguage Serverという機能に対応しているエディタであれば利用可能です。例えばVimなどでも補完を使うことが出来ます">*4</a>。</li> </ul> <p>ただし、下記の点について注意が必要です。</p> <ul> <li>TypeScriptは型指定が後置です。</li> <li>TypeScriptはStructural Subtyping(構造的部分型) を採用しています。 <ul> <li>型の構造が一致していれば派生型として扱われます。基本的に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>は型に対して厳格ですが、TypeScriptの場合はより柔軟です。これは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>からTypeScriptへの移植は簡単ですが、TypeScriptから<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>への移植は難しいことを意味しています。</li> </ul> </li> <li>計算精度について注意が必要です。 <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>の数値は常に<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C9%E2%C6%B0%BE%AE%BF%F4%C5%C0%BF%F4">浮動小数点数</a>として計算されるため、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>と計算結果が異なる場合があります。</li> </ul> </li> </ul> <h1>移植の方法</h1> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>からTypeScriptへのコンバータは知る限り存在しません。<a href="#f-71636573" name="fn-71636573" title="JavaからJavaScriptへのコンバータは昔から存在します。ただしJavaのAPIを実行するためのランタイムを抱え込む、JavaScriptのモダンなツールを使うことが出来ない、などのデメリットもあり、普段はコンバートよりもフルスクラッチに近い移植を選択しています">*5</a></p> <p>ということで、ひたすら手で書き換えていきます。対象クラスは13個です。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180305/20180305211013.png" alt="f:id:iplcojp:20180305211013p:plain" title="f:id:iplcojp:20180305211013p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>他のクラスに依存していない、例えばデータクラスの移植を最初に行なうと良いでしょう。一括変換などは現実的ではありません。エラーが出ないことを確認しながら少しずつ置き換える作業になります。</p> <p>また、作業量を削減するため、最初は<code>any</code>型を許可する設定(<code>noImplicitAny</code>を指定しない)にしておきましょう。<a href="#f-b2c93cf1" name="fn-b2c93cf1" title="勿論最終的にはanyがなくなることが望ましいです。anyを使うと型チェックや補完機能を活かすことが出来ません">*6</a></p> <p>例として、プレイヤークラスの移動処理を掲載します。</p> <p>移植前(<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>)</p> <pre class="code lang-java" data-lang="java" data-unlink> <span class="synComment">/**</span> <span class="synComment"> *</span><span class="synSpecial"> 移動処理</span> <span class="synComment"> * </span><span class="synSpecial">@param</span><span class="synIdentifier"> mx</span><span class="synComment"> x方向の入力(-1 ... +1)</span> <span class="synComment"> * </span><span class="synSpecial">@param</span><span class="synIdentifier"> my</span><span class="synComment"> y方向の入力(-1 ... +1)</span> <span class="synComment"> */</span> <span class="synType">public</span> <span class="synType">void</span> move(<span class="synType">int</span> mx, <span class="synType">int</span> my) { <span class="synComment">//Canvasの外には移動できないようにする</span> <span class="synType">double</span> postX = x + mx * speed; <span class="synType">double</span> postY = y + my * speed; <span class="synStatement">if</span> ((<span class="synConstant">0</span> &lt; postX)&amp;&amp;(postX &lt; <span class="synConstant">500</span>)) { x = postX; } <span class="synStatement">if</span> ((<span class="synConstant">0</span> &lt; postY)&amp;&amp;(postY &lt; <span class="synConstant">480</span>)) { y = postY; } } </pre> <p>移植後(TypeScript)</p> <pre class="code lang-typescript" data-lang="typescript" data-unlink> movePlayer<span class="synStatement">(</span>mx: <span class="synType">number</span><span class="synStatement">,</span> my: <span class="synType">number</span><span class="synStatement">)</span> <span class="synIdentifier">{</span> <span class="synComment">//Canvasの外には移動できないようにする</span> <span class="synIdentifier">var</span> postX: <span class="synType">number</span> <span class="synStatement">=</span> <span class="synIdentifier">this</span>.x + mx * <span class="synIdentifier">this</span>.speed<span class="synStatement">;</span> <span class="synIdentifier">var</span> postY: <span class="synType">number</span> <span class="synStatement">=</span> <span class="synIdentifier">this</span>.y + my * <span class="synIdentifier">this</span>.speed<span class="synStatement">;</span> <span class="synIdentifier">var</span> margin <span class="synStatement">=</span> <span class="synConstant">50</span> <span class="synStatement">if</span> <span class="synStatement">(</span><span class="synConstant">0</span> + margin <span class="synStatement">&lt;</span> postX <span class="synConstant">&amp;&amp;</span> postX <span class="synStatement">&lt;</span> <span class="synConstant">500</span>- margin<span class="synStatement">)</span> <span class="synIdentifier">{</span> <span class="synIdentifier">this</span>.x <span class="synStatement">=</span> postX<span class="synStatement">;</span> <span class="synIdentifier">}</span> <span class="synStatement">if</span> <span class="synStatement">(</span><span class="synConstant">0</span> + margin <span class="synStatement">&lt;</span> postY <span class="synConstant">&amp;&amp;</span> postY <span class="synStatement">&lt;</span> <span class="synConstant">480</span> - margin<span class="synStatement">)</span> <span class="synIdentifier">{</span> <span class="synIdentifier">this</span>.y <span class="synStatement">=</span> postY<span class="synStatement">;</span> <span class="synIdentifier">}</span> <span class="synIdentifier">this</span>.mesh.position.x <span class="synStatement">=</span> <span class="synIdentifier">this</span>.x<span class="synStatement">;</span> <span class="synIdentifier">this</span>.mesh.position.y <span class="synStatement">=</span> Util.<span class="synIdentifier">normalize</span><span class="synStatement">(</span><span class="synIdentifier">this</span>.y<span class="synStatement">);</span> <span class="synIdentifier">}</span> </pre> <h1>3D化</h1> <p>折角なので、見た目を豪華にするため、表示を3Dに変更しました。</p> <p>Web上で3D表示を行なう際は、必ずと言っていいほど<a href="https://threejs.org/">Three.js</a>が採用されます。今回も、Three.jsを使います。</p> <p><a href="https://threejs.org/">three.js - Javascript 3D library</a></p> <p>3Dとはいえ、当たり判定や移動ロジックなどは2Dのものをそのまま流用出来ます。2Dと同じ座標に3Dの物体を配置するようにするだけです。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>版は描画を各オブジェクトに任せるという抽象化を行っていたため、描画部分のみの変更で対応できました。</p> <h1>移植しての感想</h1> <ul> <li>元バージョンの設計がある程度抽象化されていたため、それほど苦労せずに移植出来ました。</li> <li>やはり3Dならではの描画の難しさがありました。ライティングや表示サイズを確認しながら作れないとかなり厳しいです。3DゲームでUnity等のオー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A5%EA%A5%F3">サリン</a>グツールが主流になっている理由がよく分かります。</li> <li>3D<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E2%A5%C7%A5%EA%A5%F3%A5%B0">モデリング</a>能力があればもっと見た目の良いものが出来たのでは無いかと思います。</li> <li>Three.jsには<a href="https://threejs.org/editor/">オンラインエディタ</a>が存在し、シーンを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A5%E9%A5%AF%A5%C6%A5%A3%A5%D6">インタラクティブ</a>に作成することが出来ます。そちらを使うようにしたほうが良かったかもしれません。</li> <li>元バージョンでは<a class="keyword" href="http://d.hatena.ne.jp/keyword/Flyweight">Flyweight</a>パターンを意図したオブジェクトの使い回しを行っていましたが、今となっては不要なテクニックかもしれません。</li> </ul> <p>オンラインエディタは下記のような<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A5%E9%A5%AF%A5%C6%A5%A3%A5%D6">インタラクティブ</a>なものです。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>も書けるため、使いこなすことで製作効率は上がりそうです。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180305/20180305105507.png" alt="f:id:iplcojp:20180305105507p:plain" title="f:id:iplcojp:20180305105507p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h1><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a></h1> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>は下記からダウンロード出来ます。</p> <p><a href="https://iplanning.heteml.net/2018-shooting/ipl-shooting-src.zip">https://iplanning.heteml.net/2018-shooting/ipl-shooting-src.zip</a></p> <h1>終わりに</h1> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>からWebアプリへ移行するに当たって、TypeScriptはおすすめの選択肢です。 弊社では業務アプリケーションのWebアプリへの移植も多く行っております。ご相談は<a href="https://www.ipl.co.jp/">弊社メールフォーム</a>よりお問い合わせ下さい。</p> <div class="footnote"> <p class="footnote"><a href="#fn-841706a2" name="f-841706a2" class="footnote-number">*1</a><span class="footnote-delimiter">:</span><span class="footnote-text">CordovaやElectronなどを使うことで、ネイティブアプリケーションのようなものを作ることが出来ます</span></p> <p class="footnote"><a href="#fn-369c2767" name="f-369c2767" class="footnote-number">*2</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a class="keyword" href="http://d.hatena.ne.jp/keyword/C%23">C#</a>と言語デザイナーが同じという経緯があります。実際にはTypeScriptは<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>の拡張として作られているので、あくまでスタイルが似ているということです</span></p> <p class="footnote"><a href="#fn-6f3a4216" name="f-6f3a4216" class="footnote-number">*3</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>はプロトタイプベースの言語であり、<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>やTypeScriptのクラス<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>はプロトタイプの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%F3%A5%BF%A5%C3%A5%AF%A5%B9">シンタックス</a>シュガーです。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>と同じ動作はしません。詳しくは<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>のプロトタイプについて調べてみて下さい</span></p> <p class="footnote"><a href="#fn-bfc3b7f6" name="f-bfc3b7f6" class="footnote-number">*4</a><span class="footnote-delimiter">:</span><span class="footnote-text">これ自体は<a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a>の機能というわけではなく、TypeScriptが備えているLanguage Serverという機能に対応しているエディタであれば利用可能です。例えば<a class="keyword" href="http://d.hatena.ne.jp/keyword/Vim">Vim</a>などでも補完を使うことが出来ます</span></p> <p class="footnote"><a href="#fn-71636573" name="f-71636573" class="footnote-number">*5</a><span class="footnote-delimiter">:</span><span class="footnote-text"><a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>から<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>へのコンバータは昔から存在します。ただし<a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>を実行するためのランタイムを抱え込む、<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>のモダンなツールを使うことが出来ない、などのデメリットもあり、普段はコンバートよりも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EB%A5%B9%A5%AF%A5%E9%A5%C3%A5%C1">フルスクラッチ</a>に近い移植を選択しています</span></p> <p class="footnote"><a href="#fn-b2c93cf1" name="f-b2c93cf1" class="footnote-number">*6</a><span class="footnote-delimiter">:</span><span class="footnote-text">勿論最終的にはanyがなくなることが望ましいです。anyを使うと型チェックや補完機能を活かすことが出来ません</span></p> </div> iplcojp GitLab CI を導入しました hatenablog://entry/17391345971619070390 2018-02-26T08:00:00+09:00 2018-02-26T08:00:56+09:00 GitLab で CI(継続的インテグレーション) をできるようにしました。 経緯 弊社では数年前から開発の助けとなるよう GitLab CE を運用しています。 社内で GitHub 同様にプロジェクト管理ができ開発作業に貢献してきました。 一方で、アプリの検証や納品といった作業のほとんどは手作業で行っていました。 手作業というのはとても温かみのある行為ですが、 同時にヒューマンエラーが入り込む温床となります。 また、それらの時間が削減できれば、その時間を開発に割り当てることができます。 そこで、検証や納品といった作業を自動化すべく GitLab で実現できる CI(継続的インテグレーション… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180223/20180223203025.png" alt="f:id:iplcojp:20180223203025p:plain" title="f:id:iplcojp:20180223203025p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>GitLab で CI(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B7%D1%C2%B3%C5%AA%A5%A4%A5%F3%A5%C6%A5%B0%A5%EC%A1%BC%A5%B7%A5%E7%A5%F3">継続的インテグレーション</a>) をできるようにしました。</p> <h2>経緯</h2> <p>弊社では数年前から開発の助けとなるよう <a href="https://gitlab.com/gitlab-org/gitlab-ce">GitLab CE</a> を運用しています。</p> <p>社内で <a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> 同様にプロジェクト管理ができ開発作業に貢献してきました。 一方で、アプリの検証や納品といった作業のほとんどは手作業で行っていました。</p> <p>手作業というのはとても温かみのある行為ですが、 同時にヒューマンエラーが入り込む温床となります。</p> <p>また、それらの時間が削減できれば、その時間を開発に割り当てることができます。</p> <p>そこで、検証や納品といった作業を自動化すべく GitLab で実現できる CI(<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B7%D1%C2%B3%C5%AA%A5%A4%A5%F3%A5%C6%A5%B0%A5%EC%A1%BC%A5%B7%A5%E7%A5%F3">継続的インテグレーション</a>)サービス「GitLab CI」を導入してみました。</p> <h2>注意</h2> <p>本記事で示す GitLab CI の導入方法は、 <a href="https://docs.gitlab.com/runner/">公式ドキュメント</a> をなぞったものです。 公式ドキュメントが性に合っているという方は、そちらをご覧下さい。</p> <p>また、内容は GitLab が利用できることを前提としています。</p> <h2>GitLab CI の導入</h2> <p>GitLab CI を導入には、 次の2つの手順を踏みました。</p> <ol> <li><code>.gitlab-ci.yml</code> を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>のルート<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リに追加</li> <li><code>GitLab runner</code>(以降、「runner」と呼ぶ)を設定</li> </ol> <h3>1. .gitlab-ci.yml を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>のルート<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リに追加</h3> <p>CI を実行するということは、CIでやってほしいことがあるはずです。</p> <p>そのやってほしいことを記述するファイルが <code>.gitlab-ci.yml</code>です。 これを作成して<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>のルート<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リに追加します。</p> <p>今回対象とした<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>は <a class="keyword" href="http://d.hatena.ne.jp/keyword/python">python</a> なので、次のような .gitlab-ci.yml を追加しました:</p> <pre class="code" data-lang="" data-unlink> pytest: script: - python setup.py test</pre> <p>これは次のコマンドを実行することを意味します。</p> <pre class="code" data-lang="" data-unlink>&gt; python setup.py test</pre> <p><code>.gitlab-ci.yml</code> の書き方は以下が参考になります:</p> <ul> <li><a href="https://docs.gitlab.com/ce/ci/yaml/README.html">Configuration of your jobs with .gitlab-ci.yml - GitLab Documentation</a></li> </ul> <h3>2. GitLab runner を設定</h3> <p>さて、<code>.gitlab-ci.yml</code> にやってほしいことを記述したら、いよいよ実行させてみましょう。</p> <p>CI を実行するのは、 <code>GitLab runner</code> と呼ばれる CI 実行ファイルです。 この runner を CI の実行環境(マシン。開発機と同じでも良い)で動作させることが最終的な目標となります。</p> <p>runner は CI実行時に Git を使いますので、CI実行環境には以下を配置します:</p> <ul> <li>GitLab runner</li> <li>Git</li> <li>その他、CIに必要な依存ツールがあれば</li> </ul> <p>runner のダウンロードはインストールページ(<a href="https://docs.gitlab.com/runner/install/">Install GitLab Runner - GitLab Documentation</a>)から行います。 当然ですが、環境に合致するものをダウンロードしましょう。</p> <p>runner は、実行時にとあるユーザーとして Git 、必要ならその他依存ツールを使います。 そのため、ダウンロードした runner は、例えば、<code>C:\GitLab-Runner\gitlab-runner.exe</code> というように、管理者権限やユーザー権限に制限されない場所に配置します。</p> <p>配置したら、runner の初期設定をします。</p> <p><strong>管理者権限で</strong> <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%D7%A5%ED%A5%F3%A5%D7%A5%C8">コマンドプロンプト</a>(黒い画面)を起動し、次のコマンドを実行します。</p> <pre class="code" data-lang="" data-unlink>&gt; gitlab-runner.exe register</pre> <p>コマンドを実行すると、runner の設定に関する以下の7項目を入力することになります:</p> <table> <thead> <tr> <th>No</th> <th>項目 </th> <th>内容</th> </tr> </thead> <tbody> <tr> <td>1.</td> <td>the gitlab-ci coordinator URL </td> <td>GitLab-CI を実行する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>のURLを入力します。 </td> </tr> <tr> <td>2.</td> <td>the gitlab-ci token </td> <td>GitLab-CI を実行する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A1%BC%A5%AF">トーク</a>ンを入力します。 </td> </tr> <tr> <td>3.</td> <td>the gitlab-ci description </td> <td>runner の識別名を入力します。 </td> </tr> <tr> <td>4.</td> <td>the gitlab-ci tags </td> <td>runner のタグを指定します。 </td> </tr> <tr> <td>5.</td> <td>Whether to run untagged jobs: </td> <td>タグ指定がないCIを実行をするか。 </td> </tr> <tr> <td>6.</td> <td>Whether to lock Runner to current project</td> <td>現在のプロジェクトのみで使用するか。 </td> </tr> <tr> <td>7.</td> <td>the executor </td> <td>何で実行するか。 </td> </tr> </tbody> </table> <ol> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>ページの Settings > CI / CD > Runners settings に記載されている URL を入力します。</li> <li>URLと同じ場所にに記載されている <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A1%BC%A5%AF">トーク</a>ン を入力します。</li> <li>あなたの runner の名前を決めます。既定値はPC名になっています。</li> <li>CIの実行条件となるタグを入力します。これは後からでも変更できます。</li> <li><code>false</code> が推奨です。限られた<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>のみで動作させるならば、使い勝手の点から <code>true</code> にしても良いです。</li> <li><code>true</code> が推奨です。複数の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>に対して使用したい場合は、<code>false</code> にしてもよいです。</li> <li>特に理由がなければ <code>shell</code> にしましょう。dockerなどの環境が使える場合はそれらも選択肢となるでしょう。</li> </ol> <p>煩雑な準備は以上でおしまいです。 そのまま<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%D7%A5%ED%A5%F3%A5%D7%A5%C8">コマンドプロンプト</a>で以下を実行すると、runner が利用できるようになります。</p> <pre class="code" data-lang="" data-unlink>&gt; gitlab-runner install &gt; gitlab-runner start</pre> <h2>最後に</h2> <p>今回は特定の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>に対する導入方法を紹介しました。</p> <p>GitLab CI を導入したことで、疲れていたり眠かったりするときも 作業ミスが減り開発作業が捗るようになりました。</p> <p>CI って難しいイメージがまだまだありますが、 やってみるとそれに見合うだけの結果は得られますので、 ぜひ皆さんもやってみてください。</p> <p>以上です!</p> iplcojp 会社ホームページをjekyllからhugoに移行する hatenablog://entry/17391345971619038032 2018-02-23T19:59:23+09:00 2018-02-23T19:59:23+09:00 アイプランニングのホームページのビルド環境を、JekyllからHugoに置き換えました。 経緯 Jekyllは、非常に人気のある静的サイト生成ツールです。 当ホームページも、Jekyllで生成していました。 ただし、アイプランニングのホームページのような、非常にシンプルなサイトでも ビルドに若干時間がかかってしまう(手元ではフルビルドで6秒以上)という問題がありました。 また、社内はWindowsユーザが大半で、Rubyを使うにあたって敷居が高いという問題もありました。 もう少しお手軽なものに乗り換えようと考え、下記の静的サイトジェネレータを検討しました。 検討した静的サイトジェネレータ Me… <p>アイプランニングのホームページのビルド環境を、<a href="https://jekyllrb-ja.github.io/">Jekyll</a>から<a href="https://gohugo.io/">Hugo</a>に置き換えました。</p> <h1>経緯</h1> <p>Jekyllは、非常に人気のある静的サイト生成ツールです。 当ホームページも、Jekyllで生成していました。</p> <p>ただし、アイプランニングのホームページのような、非常にシンプルなサイトでも ビルドに若干時間がかかってしまう(手元ではフルビルドで6秒以上)という問題がありました。</p> <p>また、社内は<a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>ユーザが大半で、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Ruby">Ruby</a>を使うにあたって敷居が高いという問題もありました。 もう少しお手軽なものに乗り換えようと考え、下記の静的サイトジェネレータを検討しました。</p> <h1>検討した静的サイトジェネレータ</h1> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180223/20180223194741.png" alt="f:id:iplcojp:20180223194741p:plain" title="f:id:iplcojp:20180223194741p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a href="http://www.metalsmith.io/">Metalsmith</a></p> <ul> <li>機能を高度にモジュール化した静的サイトジェネレータです。</li> <li>モジュールを組み合わせることでかなり細かく動作をカスタマイズできます。</li> <li>Node.jsで動作しますが、Jekyllに比べて特に高速というわけではないようです。</li> <li>幾つかの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>がメンテされていないようでした。</li> <li>エラーがあったファイル名を表示しないケースがありました。</li> </ul> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180223/20180223194845.png" alt="f:id:iplcojp:20180223194845p:plain" title="f:id:iplcojp:20180223194845p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a href="https://hexo.io/">Hexo</a></p> <ul> <li>Node.js製のサイトジェネレータの中でも最も人気のあるツールで、かなり多機能です。</li> <li>今回はブログ関連の機能は不要なので、見送りました。</li> </ul> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20180223/20180223194917.png" alt="f:id:iplcojp:20180223194917p:plain" title="f:id:iplcojp:20180223194917p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a href="https://gohugo.io/">Hugo</a></p> <ul> <li>Go言語で書かれており、圧倒的にビルドが高速です。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DE%A5%EB%A5%C1%A5%D7%A5%E9%A5%C3%A5%C8%A5%D5%A5%A9%A1%BC%A5%E0">マルチプラットフォーム</a>のバイナリが配布されており、ランタイムが必要ないためインストールが簡単です。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac">Mac</a>の場合はhomebrew経由でインストールできます。</li> </ul> <p>ということで、今回はhugoを選択しました。</p> <h1>jekyllテンプレートからの移行</h1> <p>基本的に、hugoの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ規約に寄せていきます。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リ構成は下記のようになりました。</p> <pre class="code lang-sh" data-lang="sh" data-unlink>. ├── config.toml ├── content(ここにmarkdownを配置) ├── layouts │   ├── _default(ここにテンプレートを配置) │   └── partials(HTMLの断片を配置) ├── package.json ├── public(生成先) └── static(CSS, JSなどのアセットはここに配置) </pre> <ul> <li>まず、ビルド対象のコンテンツはcontent/に移動</li> <li>staticファイルはstatic/に移動</li> <li><p>layoutsの移行</p> <ul> <li>_includesをlayouts/partialsに移動</li> <li><em>layouts下にあるレイアウトファイルをlayouts/</em>default/下に移動</li> <li>hugoが<a href="https://gohugo.io/templates/lookup-order/">レイアウトファイルを探しに行く</a>順序を意識することが大事です。</li> </ul> </li> <li><p>多段になっているlayoutを1段にする</p> <ul> <li>多段layoutに対応している<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF">フレームワーク</a>は少ないので、多段構成から脱却しておくほうが選択肢が広がります。</li> <li>なるべくpartialsに切り出して、繰り返しがあったとしても最小になるようにします。</li> </ul> </li> <li><p>sassを除去(弊社HP構築ではsassがそれほど有用ではなかったのと、<a class="keyword" href="http://d.hatena.ne.jp/keyword/ruby">ruby</a>依存を切るため)</p></li> </ul> <h1>config.tomlを書く</h1> <p>config.tomlを下記のようにしました。</p> <pre class="code" data-lang="" data-unlink>baseURL = &#34;https://www.ipl.co.jp/&#34; languageCode = &#34;ja-jp&#34; title = &#34;株式会社アイプランニング〜プログラム開発請負&#34; uglyURLs = true</pre> <p><code>uglyURLs</code>はデフォルトで<code>false</code>ですが、これが<code>false</code>になっていると<code>/content/test.html</code>は<code>/content/test/index.html</code>になってしまいます。 今回は移行目的だったため、リンクのメンテナンスを避けるために<code>uglyURLs</code>を<code>true</code>にしました。</p> <h1>テンプレートの違いについて</h1> <p>hugoのテンプレートとして、layouts/_defaultにsingle.htmlを配置しました。</p> <pre class="code lang-html" data-lang="html" data-unlink><span class="synComment">&lt;!DOCTYPE html&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">html</span><span class="synIdentifier"> </span><span class="synType">lang</span><span class="synIdentifier">=</span><span class="synConstant">&quot;ja&quot;</span><span class="synIdentifier">&gt;</span> {{ partial &quot;header.html&quot; . }} <span class="synIdentifier">&lt;</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&quot;page&quot;</span><span class="synIdentifier">&gt;</span> {{ partial &quot;nav.html&quot; . }} <span class="synIdentifier">&lt;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">&quot;content&quot;</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;clearfix&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">class</span><span class="synIdentifier">=</span><span class="synConstant">&quot;top__animation&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">a</span><span class="synIdentifier"> </span><span class="synType">href</span><span class="synIdentifier">=</span><span class="synConstant">&quot;/recruit/&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">img</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">&quot;/images/ipl_top_960.jpg&quot;</span><span class="synIdentifier"> </span><span class="synType">alt</span><span class="synIdentifier">=</span><span class="synConstant">&quot;2019年度新卒募集 プログラミング未経験者歓迎・人物重視 あなたの個性を活かしてみませんか?&quot;</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span>canvas<span class="synIdentifier"> </span><span class="synType">width</span><span class="synIdentifier">=</span><span class="synConstant">&quot;960&quot;</span><span class="synIdentifier"> </span><span class="synType">height</span><span class="synIdentifier">=</span><span class="synConstant">&quot;555&quot;</span><span class="synIdentifier">&gt;&lt;/</span>canvas<span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">a</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">div</span><span class="synIdentifier">&gt;</span> {{ partial &quot;sidebar.html&quot; . }} <span class="synIdentifier">&lt;</span>article<span class="synIdentifier">&gt;</span> {{ .Content }} <span class="synIdentifier">&lt;/</span>article<span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">div</span><span class="synIdentifier">&gt;</span> {{ partial &quot;footer.html&quot; . }} {{ partial &quot;ga.html&quot; . }} <span class="synIdentifier">&lt;/</span><span class="synStatement">div</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">&quot;/lib/jquery-2.1.4.min.js&quot;</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">&quot;/index.js&quot;</span><span class="synIdentifier">&gt;&lt;/</span><span class="synStatement">script</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">body</span><span class="synIdentifier">&gt;</span> <span class="synIdentifier">&lt;/</span><span class="synStatement">html</span><span class="synIdentifier">&gt;</span> </pre> <p>基本的にはmustacheです。jekyllと似ていますが、違う点は、.Contentなどのプロパティ名がCamelCaseであることです。</p> <h1>詰まったところ</h1> <ul> <li>CamelCase.htmlが404になる</li> </ul> <p>本件は理由が不明ですが、ひとまずkebab-case.htmlにリネームしました。</p> <ul> <li>hugo server -wでファイル書き換えを検知してリビルドしてくれるサーバが起動するが、ファイル名変更は検知されない</li> </ul> <p>ファイル名の変更や追加をした際、hugo serverを再実行する必要があります。</p> <h1>結果</h1> <p>jekyll3で6秒以上かかっていたフルビルドが、600ms〜700msに短縮されました。</p> <p>インクリメンタルビルドではjekyll3も速い(2秒前後)ですが、それでもフルビルドのhugoの方が高速です。 快適にプレビューすることが出来るので、頻繁に更新するサイトに良さそうです。 また、副産物として、<a class="keyword" href="http://d.hatena.ne.jp/keyword/rss">rss</a>が自動生成されるようになりました。</p> <p>問題点として、hugoのドキュメントがやや目的の情報を探しづらいと感じました。 オプションや暗黙の挙動などを調べる手間を考えると、基本的には提供されているサンプルから逸脱しない範囲でサイトを構成するのが良さそうです。</p> iplcojp レゴによるスクラム体験 hatenablog://entry/8599973812318307185 2017-04-07T00:00:00+09:00 2019-11-18T16:05:04+09:00 2018年卒の学生に向けて、一日インターンを実施しました。 業務内容の説明や業界説明、先輩社員との交流など、盛りだくさんの内容でしたが、 今回は業務体験の一環として実施した、「レゴによるスクラム体験」コーナーの内容をご紹介します。 概要 今回のインターンは、一日という短期間ですし、 プログラム未経験の学生も対象としていたので、 実際にプログラム開発の体験を行ってもらうのは、時間的に無理でした。 その為、「LEGO4SCRUM」というトレーニング手法を実施することにしました。 LEGO4SCRUMとは LEGO4SCRUMは、「業務経験者」に向けた、スクラムのトレーニング手法です。 実施方法はW… <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171901.jpg" alt="f:id:iplcojp:20171116171901j:plain" title="f:id:iplcojp:20171116171901j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>2018年卒の学生に向けて、一日<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A1%BC%A5%F3">インターン</a>を実施しました。</p> <p>業務内容の説明や業界説明、先輩社員との交流など、盛りだくさんの内容でしたが、 今回は業務体験の一環として実施した、「レゴによる<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%E9%A5%E0">スクラム</a>体験」コーナーの内容をご紹介します。</p> <h2>概要</h2> <p>今回の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%BF%A1%BC%A5%F3">インターン</a>は、一日という短期間ですし、 プログラム未経験の学生も対象としていたので、 実際にプログラム開発の体験を行ってもらうのは、時間的に無理でした。</p> <p>その為、「LEGO4SCRUM」というト<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A1%BC%A5%CB%A5%F3">レーニン</a>グ手法を実施することにしました。</p> <h2>LEGO4SCRUMとは</h2> <p>LEGO4SCRUMは、「業務経験者」に向けた、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%E9%A5%E0">スクラム</a>のト<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A1%BC%A5%CB%A5%F3">レーニン</a>グ手法です。</p> <p>実施方法は<a href="https://www.lego4scrum.com/">Webページで公開</a>されており、誰でも自由に見ることができます。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%E9%A5%E0">スクラム</a>とは「開発チームが一体となって働くこと」を目的とした、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%B8%A5%E3%A5%A4%A5%EB">アジャイル</a>ソフトウェア開発手法の1つです。開発メンバーが自発的にコラボレーションを行いながら、流動的な要求仕様の変化に対応し易い点が利点です。</p> <h2>LEGO4SCRUMとの違い</h2> <p>ただし、今回はあくまで「業務理解」のために行いたかったため、一部をアレンジして実施しました。</p> <p>まず、一番良くあるケースである「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%B9%A5%C6%A5%E0%B3%AB%C8%AF">システム開発</a>の受託案件」をシミュレーションすること。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%E9%A5%E0">スクラム</a>の概念理解は「ストーリーポイントやベロシティの理解のみとする」こと、実際の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%E9%A5%E0">スクラム</a>は、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%E9%A5%E0">スクラム</a>リーダーがいるなど、方針が異なる点があります。</p> <h1>進め方</h1> <p>基本的には、<a href="https://www.lego4scrum.com/">LEGO4SCRUM</a>で配布しているPDFをベースに、やり方を軽量化しました。実施時間はおおよそ1時間半〜2時間程度に収まります。</p> <h1>スライド</h1> <p>実際に使っているスライドを公開します。</p> <p><a href="https://iplanning.heteml.net/intern/ipl-seminar-r5-lego.pdf">https://iplanning.heteml.net/intern/ipl-seminar-r5-lego.pdf</a></p> <h1>ツール</h1> <p>IPLオリジナルのタイマーツールを作成しました。</p> <p><a href="http://iplanning.heteml.net/seminar-timer/">&#x30EC;&#x30B4;&#x30B9;&#x30AF;&#x30E9;&#x30E0;&#x30C4;&#x30FC;&#x30EB;</a></p> <h2>準備</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171842.jpg" alt="f:id:iplcojp:20171116171842j:plain" title="f:id:iplcojp:20171116171842j:plain" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>レゴは、下記のものを一箱ずつ購入しました。おおよそ8名くらいは賄えそうな感触でした。 <ul> <li><a href="https://www.amazon.co.jp/%E3%83%AC%E3%82%B4-LEGO-%E3%82%AF%E3%83%A9%E3%82%B7%E3%83%83%E3%82%AF-%E9%BB%84%E8%89%B2%E3%81%AE%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9-%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AB/dp/B00PY3EYQO/">黄色のアイデアボックス スペシャル</a></li> <li><a href="https://www.amazon.co.jp/%E3%83%AC%E3%82%B4-LEGO-%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A2%E3%83%91%E3%83%BC%E3%83%84-%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AB%E3%82%BB%E3%83%83%E3%83%88-10695/dp/B00PY3EYSW">アイデアパーツ スペシャルセット</a></li> </ul> </li> <li>A3コピー用紙を机の上に敷いておきます。</li> <li>大きめの付箋 <ul> <li>あらかじめ「1階建ての家」「2階建ての家」「お店」「バス停」などを書いた付箋をホワイトボードに貼っておきます。</li> </ul> </li> </ul> <h2>イントロダクション</h2> <ul> <li>共同作業を促進するために、参加者に軽く自己紹介してもらいます。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/LEGO">LEGO</a>を通じて、業務が体験できることを説明します。 <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE%A1%BC">プログラマー</a>の仕事は、ただ席に座ってプログラムをするだけではなく、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D2%A5%A2%A5%EA">ヒアリ</a>ングやチームでの共同作業など、コミュニケーションが多いことを説明します。</li> </ul> </li> </ul> <h2>ア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>出し</h2> <ul> <li>A3用紙を広げ、川や木、山などの地形図を自由に書きます。</li> <li>「理想の街」にはどんな建物があるか、自由に発想してもらいます。ダメ出しはしません。</li> <li>ア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>は付箋上に自分で書いてもらいます。書いてもらった付箋はホワイトボードに貼りつけます。</li> <li>だいたい参加者2名の場合で10件くらいア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>ができればOKです。</li> </ul> <h2>ルールの説明</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171626.png" alt="f:id:iplcojp:20171116171626p:plain" title="f:id:iplcojp:20171116171626p:plain" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>計画し、協力することが大事というメッセージを伝えます。</li> <li>作成作業に「7分」の時間制限があることを説明します。</li> </ul> <h2>見積もり</h2> <ul> <li><a href="http://www.ryuzee.com/contents/blog/3716">ストーリーポイント</a>の説明を行ないます。</li> <li>スイムレーンウォールをホワイトボードに書きます。</li> <li>ストーリーポイントに従って振り分けを行ないます。</li> </ul> <p><strong>ストーリーポイント</strong>とは、作業量を表す架空の単位です。</p> <p>例えば、一階建ての家を「ストーリーポイント1」とすると、二階建ての家は二倍の労力がかかると見込まれるため、「ストーリーポイント2」と置きます。</p> <p>所要時間のような、絶対的な単位で作業を見積もることは熟練者でも非常に難しいですが、 相対的に見積もるのは比較的簡単なので、このような手法を用います。</p> <p><strong>スイムレーンウォール</strong>とは、下記画像のようなものです。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171649.png" alt="f:id:iplcojp:20171116171649p:plain" title="f:id:iplcojp:20171116171649p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>付箋に書いたタスクを一つづつ取り出し、それぞれどれくらいのストーリーポイントを割り当てるべきか、 参加者に聞き、該当するストーリーポイントのレーンに貼っていきます。</p> <p>スイムレーンに分配し終わったら、それぞれのカードにストーリーポイントを書いていきます。</p> <p>ストーリーポイントの見積もりには「プランニングポーカー」というカードを使った見積もり手法が有名ですが、 スイムレーンウォールはより高速な見積もり手法です。 今回は時間の制約があるため、スイムレーンウォールを採用しました。</p> <h2>スタート</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171703.jpg" alt="f:id:iplcojp:20171116171703j:plain" title="f:id:iplcojp:20171116171703j:plain" class="hatena-fotolife" itemprop="image"></span></p> <ul> <li>付箋を「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%C3%A5%AF%A5%ED%A5%B0">バックログ</a>」に移動し、スプリントの箱をホワイトボードに書きます。</li> <li>ストップウォッチをホワイトボードに映します。</li> </ul> <p><strong>【1】スプリント計画(3分)</strong></p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%C3%A5%AF%A5%ED%A5%B0">バックログ</a>から「7分でやれる量」を取り出し、スプリントに移動してもらう</li> </ul> <p><strong>【2】スプリント(7分)</strong></p> <ul> <li>実作業</li> <li>4分経過時に声をかける</li> </ul> <p><strong>【3】スプリントレビュー(5分)</strong></p> <ul> <li>改善案を伝え、付箋に書いてもらう</li> <li>改善案について追加見積もりを行なう</li> <li>チームのベロシティを伝え、次の計画に活かしてほしいと伝える</li> <li>未完成のものがある場合は、それを含めない値をActualの参考値として出しておく</li> </ul> <p>これを、3回繰り返します(1回につき15分かかります)</p> <h2>まとめ</h2> <ul> <li>参加者に、次回同じことをするとすれば、どうしたら更に良くなるか、方法を考えてもらいます。</li> <li>実務に則ったものであることを説明します。実施者が顧客と実際にあったやり取りなどを例に出して、どうしてきたかを伝えます。</li> </ul> <h2>実施風景</h2> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171716.jpg" alt="f:id:iplcojp:20171116171716j:plain" title="f:id:iplcojp:20171116171716j:plain" class="hatena-fotolife" itemprop="image"></span> 小さなパーツを見つけるのが大変なようで、あとで小さいパーツは袋に分ける工夫を行いました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171725.jpg" alt="f:id:iplcojp:20171116171725j:plain" title="f:id:iplcojp:20171116171725j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>チームによって、装飾のセンスが出てくるので見ていて面白いです。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171737.jpg" alt="f:id:iplcojp:20171116171737j:plain" title="f:id:iplcojp:20171116171737j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>オリジナル版では4人以上を推奨としていますが、初対面のメンバーだと案外2〜3名程度の方が、積極的に参加してくれるので感触としては良かったです。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171747.jpg" alt="f:id:iplcojp:20171116171747j:plain" title="f:id:iplcojp:20171116171747j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>「理想の街」の条件として、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%F2%C4%CC%B5%A1%B4%D8">交通機関</a>が挙げられることが多かったです。要望を出す側も<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%F2%C4%CC%B5%A1%B4%D8">交通機関</a>があると生活<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C6%B0%C0%FE">動線</a>からの意見を言ったりと、やりやすい面が有りました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171759.jpg" alt="f:id:iplcojp:20171116171759j:plain" title="f:id:iplcojp:20171116171759j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>スプリントの枠は最初から3つ書かない方が良いようです。ベロシティが出る前に、全体の計画に意識が行ってしまいます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171810.jpg" alt="f:id:iplcojp:20171116171810j:plain" title="f:id:iplcojp:20171116171810j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171116/20171116171820.jpg" alt="f:id:iplcojp:20171116171820j:plain" title="f:id:iplcojp:20171116171820j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>実施者が市長になりきって、「市長の家」や「市長の像」をリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>トするとやりやすいですね。「市長の像」は特に無茶な要求を思いつきやすいという事情もあったりします(作る側は大変そうでしたが)。</p> <h2>参加者から寄せられた感想</h2> <p>参加者からは、以下のような感想が寄せられました。</p> <ul> <li>プロジェクトをチームで進めていく際のプロセスがわかりやすく体験出来た。</li> <li>大きなものの見積もりが難しいと感じた。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%B9%A5%C6%A5%E0%A5%A8%A5%F3%A5%B8%A5%CB%A5%A2">システムエンジニア</a>の仕事内容が、イメージとズレがあったが、早めにズレをなくせてよかった。</li> <li>実際にお客様と話し合って欲しいものを探していく仕事内容が面白そうでとても興味が湧いた。</li> <li>最初はこれで分かるのか疑問に思っていたが、やり終わった後にだいたいのイメージが湧いて、少し理解できた。</li> <li>1回目はかなり時間が余ってしまい、見通しが甘かったと感じた。2回目では経験を活かし、ちょうどいい割当が出来た。3回目では作業を一つ忘れてしまい、目標を達成することができなかった。</li> <li>次に同じことを行なうとしたら、作業一つ一つに責任者を付け、チーム・要求者でどのようなものを作るのかという意識を統一して行いたい。</li> <li>チームでの開発の大変なところや忘れがちなポイントも、レビューの結果を交えて説明されていたことが、とても参考になった。</li> <li>お客様からの要求をしっかりと確認しておくことで、余計な工程を減らすことが出来るということがわかり、確認の繰り返しも重要な仕事だと感じた。</li> </ul> <h2>実施者としての感想</h2> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B7%A5%B9%A5%C6%A5%E0%B3%AB%C8%AF">システム開発</a>のプロセス体験としても十分に使える、かなりよく練られた手法であると感じました。また、<a class="keyword" href="http://d.hatena.ne.jp/keyword/LEGO">LEGO</a>を使ったことで、かなり敷居の高さを抑えることが出来ました。</p> <p>実際に起きるコミュニケーションもなかなかリアルで、例えば1回目の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C6%A5%EC%A1%BC%A5%B7%A5%E7%A5%F3">イテレーション</a>で「おもったよりこなせてしまった」チームが、2回目で欲張った計画を立ててしまい、炎上して計画の見直しを余儀なくされるシーンがありました。 慌てる参加者とは裏腹に、実施者としては「この失敗をしてほしかった!」と思っていました。</p> <p>一方、チームによって作る建造物のスケール感がバラバラで、最初に小さく作りすぎてしまい、最初に切ったチケットの大半が2<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C6%A5%EC%A1%BC%A5%B7%A5%E7%A5%F3">イテレーション</a>で消化されてしまうことがありました。最初にスケール感を指定して置くことが大事かもしれません。</p> iplcojp Intel NUC (NUC6i5SYH) を導入しました hatenablog://entry/8599973812327664708 2016-07-14T00:00:00+09:00 2017-12-18T15:42:15+09:00 会社で Intel NUC (NUC6i5SYH) を購入してもらいました。 組み立てとWindows10のインストール、ドライバインストールやBIOSアップデートについて紹介します。 使っていたデスクトップ用のWindowsPCが不調で、PCを新調する必要があったので思い切ってIntel NUCを買ってもらいました。 NUC本体にはメモリとストレージが入っていないため別途購入となります。 メモリは32GB、SSDは512GBのものを購入しました。 Mac Miniと比較するとその小ささが際立ちます。 デスクの上にこの2台を置いてもすっきりしてて良い感じです。 控えめに言って最高なので、今後も… <p>会社で <a class="keyword" href="http://d.hatena.ne.jp/keyword/Intel">Intel</a> NUC (NUC6i5SYH) を購入してもらいました。 組み立てとWindows10のインストール、ドライバインストールや<a class="keyword" href="http://d.hatena.ne.jp/keyword/BIOS">BIOS</a>アップデートについて紹介します。</p> <p>使っていたデスクトップ用のWindowsPCが不調で、PCを新調する必要があったので思い切って<a class="keyword" href="http://d.hatena.ne.jp/keyword/Intel">Intel</a> NUCを買ってもらいました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153354.jpg" alt="f:id:iplcojp:20171218153354j:plain" title="f:id:iplcojp:20171218153354j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>NUC本体にはメモリとストレージが入っていないため別途購入となります。</p> <p>メモリは32GB、<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSD">SSD</a>は512GBのものを購入しました。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20Mini">Mac Mini</a>と比較するとその小ささが際立ちます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153409.png" alt="f:id:iplcojp:20171218153409p:plain" title="f:id:iplcojp:20171218153409p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>デスクの上にこの2台を置いてもすっきりしてて良い感じです。</p> <p>控えめに言って最高なので、今後もっと会社に導入されていって欲しい感あります。</p> <p>この後は、NUCの組み立て方法とWindows10のインストール、ドライバインストールなどの初期設定について書いていきます。</p> <p>NUCを購入した方や購入検討の方への参考になればと思います。</p> <h3>組み立て方法</h3> <p>組み立てはいたって簡単で、裏蓋を空けてメモリと<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSD">SSD</a>を挿すだけです。</p> <p>まず裏蓋を空けてメモリを取り付けます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153427.jpg" alt="f:id:iplcojp:20171218153427j:plain" title="f:id:iplcojp:20171218153427j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>裏蓋と本体がつながっているので強く引っ張らないように気をつけたほうが良さそうでした。</p> <p>次に<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSD">SSD</a>です。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153441.jpg" alt="f:id:iplcojp:20171218153441j:plain" title="f:id:iplcojp:20171218153441j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>M.2が凄く小さくてびっくりしました!512GBの容量があってこのサイズすごいですね。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153714.jpg" alt="f:id:iplcojp:20171218153714j:plain" title="f:id:iplcojp:20171218153714j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/SSD">SSD</a>はネジで止める必要がありますので、購入したM.2のタイプを確認して説明書通りにネジで止めます。</p> <p>後は蓋を閉じれば完了です。</p> <p>簡単に取付可能なのでPCの中身をいじった経験のない方でも簡単にできると思います。</p> <p>まだOSをインストールしていませんが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/BIOS">BIOS</a>からメモリと<a class="keyword" href="http://d.hatena.ne.jp/keyword/SSD">SSD</a>がちゃんと取り付けられて認識されているか確認します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153729.jpg" alt="f:id:iplcojp:20171218153729j:plain" title="f:id:iplcojp:20171218153729j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153740.jpg" alt="f:id:iplcojp:20171218153740j:plain" title="f:id:iplcojp:20171218153740j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Intel">Intel</a> Visual <a class="keyword" href="http://d.hatena.ne.jp/keyword/BIOS">BIOS</a> かっこいいし見やすいので良い感じです。</p> <h3>Windows10のインストール</h3> <p>USBからインストールできるタイプのWindows10を使用してインストールします。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153758.jpg" alt="f:id:iplcojp:20171218153758j:plain" title="f:id:iplcojp:20171218153758j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>中を開けるとUSBとプロダクトコードが入っています。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153811.jpg" alt="f:id:iplcojp:20171218153811j:plain" title="f:id:iplcojp:20171218153811j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>USBをさす方向で少し迷いましたが、保護フィルムを剥がして以下のように差し込みます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153822.jpg" alt="f:id:iplcojp:20171218153822j:plain" title="f:id:iplcojp:20171218153822j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/SSD">SSD</a>の中身も空なのでNUCを起動するとUSBからWindows10の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%F3%A5%B9%A5%C8%A1%BC%A5%E9">インストーラ</a>が起動します。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153835.jpg" alt="f:id:iplcojp:20171218153835j:plain" title="f:id:iplcojp:20171218153835j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>64bit版を選択しました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153846.jpg" alt="f:id:iplcojp:20171218153846j:plain" title="f:id:iplcojp:20171218153846j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153856.jpg" alt="f:id:iplcojp:20171218153856j:plain" title="f:id:iplcojp:20171218153856j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>インストールの種類はカスタムを選択して表示されているドライブを選択しました。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D1%A1%BC%A5%C6%A5%A3%A5%B7%A5%E7%A5%F3">パーティション</a>を分けたい場合はここでカスタマイズします。</p> <p>あとはメニューに従ってインストールをしていきます。</p> <p>結構時間がかかることを想定していたのですが、10分程度でインストールが終わりました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153909.jpg" alt="f:id:iplcojp:20171218153909j:plain" title="f:id:iplcojp:20171218153909j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>Windows10を初めて起動すると初期設定を行う画面がでてきます。</p> <p>この設定は簡単設定でも行えますが、項目を確認の上カスタマイズして設定したほうが良さそうな内容でしたのでそちらをおすすめします。</p> <h4>ドライバのインストール</h4> <p>NUCにWindows10をインストールしたものの、LANケーブルをさしていてもネットワークに接続されません。</p> <p>ドライバをインストールする必要があります。ドライバは下記のリンクからダウンロード可能です。</p> <p><a href="https://downloadcenter.intel.com/product/89190/Intel-NUC-Kit-NUC6i5SYH" title="Drivers &amp; Software">Drivers &amp; Software</a></p> <p>ドライバインストールにあたって、NUCの各部分の正式名称が気になりましたので以下を参考にしました。</p> <p><a href="http://www.intel.com/content/www/us/en/nuc/nuc-kit-nuc6i5syh-nuc6i5syk-brief.html" title="Intel® NUC Kits: NUC6i5SYH and NUC6i5SYK Product Brief">Intel® NUC Kits: NUC6i5SYH and NUC6i5SYK Product Brief</a></p> <p>以下に貼ってあるドライバのリンクは逐次更新されるので実際にインストールするときは最新のドライバをインストールすることをおすすめします。</p> <p>なのでリンクは参考程度に。</p> <h4>ネットワークドライバのインストール</h4> <p>ネットワークに繋がっていないと困りますのではじめにネットワークドライバをインストールします。</p> <p>NUCはまだインターネットにつながっていないので、インターネットがつながっている別のPCでドライバをインストールします。</p> <p><a href="https://downloadcenter.intel.com/download/25959/Intel-Gigabit-Network-Connection-Driver-for-Intel-NUC-Kits-NUC6i-x-SY-and-NUC6i7KYK?product=89190" title="Download Intel® Gigabit Network Connection Driver for Intel® NUC Kits NUC6i[x]SY and NUC6i7KYK">Download Intel® Gigabit Network Connection Driver for Intel® NUC Kits NUC6i[x]SY and NUC6i7KYK</a></p> <p>Windows10のドライバをダウンロードしてUSBに入れます。</p> <p>ドライバを入れたUSBをNUCに接続して、exeを実行してネットワークドライバをインストールします。</p> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/BIOS">BIOS</a>のアップデート</h4> <p>最新版の<a class="keyword" href="http://d.hatena.ne.jp/keyword/BIOS">BIOS</a>もありましたのでアップデートします。</p> <p><a href="https://downloadcenter.intel.com/download/26097/BIOS-Update-SYSKLi35-86A-?product=89190" title="Download BIOS Update [SYSKLi35.86A]">Download BIOS Update [SYSKLi35.86A]</a></p> <p>ダウンロードできる形式がいくつかありますが、exe形式のものをダウンロードします。</p> <p>ネットワークドライバをインストールしたのでNUCから直接ダウンロードしてexeを実行してアップデートを行いました。</p> <h4>グラフィックドライバのインストール</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/BIOS">BIOS</a>をアップデートしたところ、画面がちらつくようになってしまったのでグラフィックドライバをインストールしました。</p> <p><a href="https://downloadcenter.intel.com/download/26047/Intel-HD-Graphics-Driver-for-Windows-7-8-1-and-Windows-10-for-Intel-NUC-Kits-NUC6i-x-SY?product=89190" title="Download Intel® HD Graphics Driver for Windows 7*, 8.1* and Windows® 10 for Intel® NUC Kits NUC6i[x]SY">Download Intel® HD Graphics Driver for Windows 7<em>, 8.1</em> and Windows® 10 for Intel® NUC Kits NUC6i[x]SY</a></p> <p>グラフィックドライバはzip形式で配布されており、解凍して中に入っているSetup.exeを実行してインストールします。</p> <p>インストール途中でオプションの選択があります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218153928.jpg" alt="f:id:iplcojp:20171218153928j:plain" title="f:id:iplcojp:20171218153928j:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>アドバンスド・ネットワーク・サービスはWindows10では正しく動作しないとアラートが出るのでチェックを外しました。</p> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/SNMP">SNMP</a>エージェントは使う予定がないのでチェックを入れていません。</p> <h3>最後に</h3> <p>NUCの日本語情報があまりなく、ドライバのインストールなどどうやってやるのか手探りで行いましたが無事に終わって良かったです。</p> <p>ドライバは他にもありますので必要になれば適宜インストールをすれば良さそうです。</p> <p>せっかくメモリ32GBと潤沢なので<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%BE%C1%DB%A5%DE%A5%B7%A5%F3">仮想マシン</a>のホストとして使っていく予定です。</p> <p>NUCはコンパクトでデスクトップ用としてはとても良いと思いますので会社でもっと増えると面白いかなと思います。</p> iplcojp これだけ覚えるGit hatenablog://entry/8599973812327666167 2016-01-27T00:00:00+09:00 2017-12-18T15:48:41+09:00 これからのソース管理のスタンダード「Git」についてご紹介します。非常に多機能なツールですので、必要最低限のコマンドのみご説明します。 Gitを始めよう ソースバージョン管理ツールには、「Subversion」「CVS」「VisualSourceSafe」など数多くあり、プロジェクトの特徴に合わせて使い分けられてきました。 近年、急速にGitが使われるようになり、今やソース管理のデファクトスタンダートとなりつつあります。今後新規案件でSubversionやCVSが使われることはなくなっていくと考えられます。 ただし、Gitは取っつきにくい点が多いのが難点です。Gitの考え方及び、コマンドライン… <p>これからのソース管理のスタンダード「Git」についてご紹介します。非常に多機能なツールですので、必要最低限のコマンドのみご説明します。</p> <h3>Gitを始めよう</h3> <p>ソースバージョン管理ツールには、「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Subversion">Subversion</a>」「<a class="keyword" href="http://d.hatena.ne.jp/keyword/CVS">CVS</a>」「VisualSourceSafe」など数多くあり、プロジェクトの特徴に合わせて使い分けられてきました。</p> <p>近年、急速にGitが使われるようになり、今やソース管理の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D5%A5%A1%A5%AF%A5%C8">デファクト</a>スタンダートとなりつつあります。今後新規案件で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Subversion">Subversion</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/CVS">CVS</a>が使われることはなくなっていくと考えられます。</p> <p>ただし、Gitは取っつきにくい点が多いのが難点です。Gitの考え方及び、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%E9%A5%A4%A5%F3">コマンドライン</a>での使い方を習得しなければなりません。弊社でも多くのプロジェクトで採用されていますが、引き継ぎ時にGitがネックとなることがあります。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/Subversion">Subversion</a>との比較</h3> <p>ここでは、以前の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D5%A5%A1%A5%AF%A5%C8">デファクト</a>である「<a class="keyword" href="http://d.hatena.ne.jp/keyword/Subversion">Subversion</a>」と「Git」を比較し、特徴を説明します。</p> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/Subversion">Subversion</a>の場合</h4> <p>チーム開発で<a class="keyword" href="http://d.hatena.ne.jp/keyword/Subversion">Subversion</a>を使うとき、中央<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を用意するのが一般的な構成となります。コミットは中央<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>と接続(オンライン)されていないと行なうことが出来ません。</p> <p>中央<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>へのコミットは他のメンバーに影響を及ぼすので、内容を十分に吟味してからコミットを行なう必要があります。作業中にとりあえずコミットするような使い方には向かず、手元で別<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リにファイルを退避するなどの対応をすることもあります。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154507.png" alt="f:id:iplcojp:20171218154507p:plain" title="f:id:iplcojp:20171218154507p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h4>Gitの場合</h4> <p>Gitでは、分散型という仕組みを使っています。下記の図のように、各人が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>のコピーを所有し、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>同士で変更点を送り合って同期するという仕組みです。</p> <p>このことにより、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Subversion">Subversion</a>のように、いきなり中央<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>にコミットするようなことがなくなります。作業中のコミットを手元の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>で行い、その後に複数のコミットを一つにまとめることで、コミットログを綺麗に保つことが出来ます。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154523.png" alt="f:id:iplcojp:20171218154523p:plain" title="f:id:iplcojp:20171218154523p:plain" class="hatena-fotolife" itemprop="image"></span></p> <h3>Gitを始める前に</h3> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>の場合</h4> <p>Gitクライアントは、<a href="https://ja.atlassian.com/software/sourcetree/overview/">SourceTree</a>を使うのが現状最も無難と思われます。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%DE%A5%F3%A5%C9%A5%E9%A5%A4%A5%F3">コマンドライン</a>から使えるGit for <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a>などもありますが、OS標準でないシェルを使うことになるため、Gitに慣れてからの方がいいでしょう。</p> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a> / <a class="keyword" href="http://d.hatena.ne.jp/keyword/OSX">OSX</a>の場合</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/GUI">GUI</a>のGitクライアントは利用せず、ターミナルから直にコマンドを実行することをおすすめします。これが面倒に思われる場合は、お使いのエディタにGit<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>を導入してください。</p> <ul> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/CentOS">CentOS</a>では、<code>yum install git</code>を実行します。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Ubuntu">Ubuntu</a>では、<code>apt-get install git</code>を実行します。</li> </ul> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/OSX">OSX</a>では、homebrew経由でインストールすると良いでしょう。詳しくは:<a href="http://blogged.e2esound.com/2013/07/03/git-kai_how_to_install_git_with_homebrew/">MacにHomebrewでgitをインストールする | e2esound.com業務日誌</a></p> <h4><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>に登録しよう</h4> <p>まず、<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>にアカウントを作ることをおすすめします。<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>はGitの最良の相方とも言うべき<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%A5%B5%A1%BC%A5%D3%A5%B9">Webサービス</a>です。以下のような恩恵を無料で受けることが出来ます。</p> <ul> <li>無料で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>を保管することができます(ただし公開状態になることに注意)</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>ごとにイシュートラッカー(バグやTODOなどをリスト管理することが出来る)を利用可能</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Wiki">Wiki</a>を利用可能</li> <li>プルリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>ト(コミットの取り込み依頼)を発行することが出来る</li> </ul> <h4>Git<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を新規作成する</h4> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を作成するには、下記の2つの方法があります。</p> <ul> <li>フォルダを作成して、その中で<code>git init</code>を実行する。<code>.git</code>というフォルダが作成されます。</li> <li><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>上で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を新規作成してから<code>git clone</code>を行なう。詳しくは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>作成後に表示される操作手順に従って下さい。</li> </ul> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を用意したら、早速コミットを行ってみましょう。</p> <h3>コミットの基本的な流れ</h3> <p>コミットの基本的な流れは、下図の通りです。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154542.png" alt="f:id:iplcojp:20171218154542p:plain" title="f:id:iplcojp:20171218154542p:plain" class="hatena-fotolife" itemprop="image"></span></p> <ol> <li>まず、ファイルの編集を行います。</li> <li>コミットしたいファイルを <code>git add ファイル名</code> コマンドで登録します。この操作を「ステージング」と呼びます。</li> <li>(オプション)<code>git status</code> コマンドを実行し、どのファイルがコミットされるかを確認します。</li> <li>(オプション)<code>git diff</code> コマンドを実行し、ファイルの差分を確認します。</li> <li>コミットを行います。コマンドは <code>git commit -m "コミットメッセージ"</code> です。</li> </ol> <p>このように、コミットを積み重ねることで、変更点のログが出来上がっていきます。これをコミットログと呼びます。コミットログは、<code>git log</code> で確認することが出来ます。また、<code>tig</code>や<code>SourceTree</code>などのツールを利用すると、よりグラフィカルにコミットログを閲覧することが出来ます。</p> <p>2番目の手順「ステージング」は、やや独特な概念ですので、下記で説明します。</p> <h4>ステージングとは</h4> <p>Gitでは、コミットの前にステージングという段階があります。ステージングでは、次のコミットに何を含めるかを検討します。</p> <p>このステージングによって、Gitでは複数の変更点が一つのコミット内に混じることを防いでいます。 <code>git add .</code> コマンドで全ファイルをコミットに含めることも出来ますが、意図しないファイルをコミットに含めないよう、実行後に <code>git status</code> で実行内容を確認してください。</p> <h3>実際のコミット例</h3> <p>では、コミットの流れを実例で見てみましょう。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154556.png" alt="f:id:iplcojp:20171218154556p:plain" title="f:id:iplcojp:20171218154556p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>まず、<code>AAA.txt</code>と<code>BBB.txt</code>という2ファイルがある状況を例にします。</p> <p>編集中のフォルダの内容は、「ワークツリー」と呼ばれます。実ファイルのことと考えて問題ありません。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154611.png" alt="f:id:iplcojp:20171218154611p:plain" title="f:id:iplcojp:20171218154611p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ファイルをステージすると、「インデックス」という場所にファイルが登録されます。</p> <p>登録には<code>git add</code>コマンドを使います。例では、すべてのファイルをaddするために<code>git add .</code>を実行しました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154626.png" alt="f:id:iplcojp:20171218154626p:plain" title="f:id:iplcojp:20171218154626p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>ファイルのコミットを実行します。コミットを行なうと、インデックスに登録されていたファイルの変更点が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>に記録されます。</p> <p>コミット時には必ず「コミットメッセージ」が必要です。後で誰かが見た時に、何の変更が行われたかわかりやすいよう、具体的に書いて下さい。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154636.png" alt="f:id:iplcojp:20171218154636p:plain" title="f:id:iplcojp:20171218154636p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>さて、今度はファイルを変更して、もう一つコミットを作成してみましょう。</p> <p>まず、AAA.txtを編集します。ここで<code>git status</code>コマンドを実行すると、<code>AAA.txt</code>はまだステージされていないため、これだけではまだコミットできません。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154650.png" alt="f:id:iplcojp:20171218154650p:plain" title="f:id:iplcojp:20171218154650p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>次に、<code>git add AAA.txt</code>で変更点をステージしましょう。</p> <p>ステージにより、インデックスにAAA.txtが登録され、コミット可能になりました。<code>git status</code>を実行し、ステージされていることを確認してみましょう。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154704.png" alt="f:id:iplcojp:20171218154704p:plain" title="f:id:iplcojp:20171218154704p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>コミットを行います。</p> <p>このようにして、コミットログが積み重なっていきます。</p> <h3>リモー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%EA%A5%DD%A5%B8">トリポジ</a>トリとの同期</h3> <p>次に、他のユーザと変更点を共有するにはどうしたらいいか、ご説明します。</p> <p>ここでは、<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>(またはBitBucketやGitLab)を使っている前提として説明を行います。</p> <p>まず、<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>上に新規<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を作成し、ローカルにその<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>を予めcloneしておくとスムーズです。</p> <h4>Push</h4> <p>Pushは下記の手順で行います。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/iplcojp/20171218/20171218154721.png" alt="f:id:iplcojp:20171218154721p:plain" title="f:id:iplcojp:20171218154721p:plain" class="hatena-fotolife" itemprop="image"></span></p> <ol> <li>まず、コミットログを重ねます。コミットは一つ以上必要です。</li> <li>次に、他のメンバーがコミットを行っていないかチェックしましょう。<code>git fetch origin master</code>でリモー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%EA%A5%DD%A5%B8">トリポジ</a>トリの変更を取得します。</li> <li><code>git merge origin/master</code> で取得してきた変更点のマージを行います。ここで変更点が衝突し「コンフリクト」が発生することがあります。コンフリクトの解消については、この記事が参考になります:<a href="http://qiita.com/yuya_presto/items/5d99499cf96c0ebb09f8">Gitコンフリクト解消ガイド(git mergetoolの使い方) - Qiita</a></li> <li>ローカルの変更を<code>git push origin master</code>コマンドでリモートに送信します。</li> </ol> <p>ここで出てくる<code>origin</code>とは、リモー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%EA%A5%DD%A5%B8">トリポジ</a>トリの名前です。普通はoriginという名前で登録しますが、別の名前で複数のリモー<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C8%A5%EA%A5%DD%A5%B8">トリポジ</a>トリを登録することもできます。</p> <p><code>master</code>とは、デフォルトで選択されているブランチ名です。今回は解説しませんが、「プルリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>ト駆動開発」などを行う場合は、別のブランチを作る必要があります。</p> <h3>補足</h3> <p><code>git push / git fetch</code> ではなく、<code>git push / git pull</code>の対応で紹介している入門記事もありますが、慣れるまでは<code>git pull</code>を使わない方が、理解しやすいと思います。理由についてはこちらの記事が詳しいです:<a href="http://dqn.sakusakutto.jp/2012/11/git_pull.html">Git pullを使うべきでない3つの理由 · DQNEO起業日記</a></p> <p><code>git push origin master</code>というコマンドを紹介しましたが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>等ではmaster以外の「ブランチ」を作成して、プルリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>トで変更を取り込む手順が推奨されるようになってきています。本稿では紹介しませんでしたが、masterに直接コミットするのは危険という考えが一般的になってきています。gitに慣れたら、ブランチの使い方についても学習してみてください。</p> <h3>おわりに</h3> <p>Gitにはとっつきにくい点もありますが、現行ではベストのソリューションと考えられます。Gitが<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AA%A1%BC%A5%D7%A5%F3%A5%BD%A1%BC%A5%B9">オープンソース</a>文化の勢いの源となっていることは間違いありません。</p> <p>単体で使うだけだと利点を感じにくいかもしれませんが、<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>やGitLabと合わさると非常に開発効率向上に貢献します。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE%A1%BC">プログラマー</a>のモチベーションも高く保つことが出来るでしょう。ここでは紹介しませんでしたが、プルリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>トやIssue Trackerもぜひ使ってみてください。</p> iplcojp