アイプランニングではB2Bのデスクトップアプリケーション開発が主流ですが、 Webシステムの開発を引き受けることも多くなっています。 当然人材育成が必要になるのですが、現時点でIPLで教育に使っている・使う予定のある教材を紹介します。 Webの基礎知識 ウェブ入門 - ウェブ開発を学ぶ | MDN まずはHTMLとCSSの学習から始め、サーバ・クライアントのイメージとDOMについての理解のベースを作ります。 MDNは現在最も信頼のおける学習リソースとなっています。 Webのローレベル Webアプリエンジニアはいきなりフレームワークから学ぶことも多いと思うのですが、 実務ではChrome Dev…

毎年恒例の1dayインターンですが、前年まで実施していた「レゴで学ぶスクラム」はコロナ対策の為 実施不可能になってしまいました。好評だったのに残念です… レゴスクラムは元ネタが存在するため楽だったのですが、前例のない状況下ですので自分で考えなくてはなりません。 頭を捻った末に生まれたのがこの「タートルグラフィックスで納品体験」です。 概要 Scratchでタートルグラフィックスを作り、それをクリスマスツリーに飾ります。 使うツール Code.org 課題#1～#5 Code.org 課題#10 タートル配置ツール スライド 学ぼうプログラミング 目的 forループを使って成果物を作る 見積もり…

本記事では、CSSレイアウトの基礎とレスポンシブレイアウトについて学ぶ事ができます。 利用方法と対象読者層 この記事は社内CSSワークショップのために書かれた記事ですが、教育用途などにご自由にご利用ください。説明に1～1.5時間要します。 対象はHTML, CSSの基礎を知っている方です。div等代表的な要素を知っている、CSSセレクタがわかるレベルを想定しています。 基本的にはMDNの下記の記事を下敷きにしています。内容はなるべく噛み砕き、利用頻度の低い手法は省略しましたが、記載に食い違いがある場合はMDN側を正と考えてください。 developer.mozilla.org 通常フロー ブラ…

アイプランニングはWeb系企業ではありませんが、Web技術に関しての社内講座やハンズオンも積極的に実施しています。 Node.js入門として一般の方にも参考にしていただけるよう、一部を公開いたします。 Node.jsとは Node.jsはサーバサイドJavaScriptランタイムです。たとえば、下記のようにJavaScriptファイルを実行することができます。 node main.js ブラウザもJavaScriptランタイムの一つですが、Node.jsではセキュリティ上の理由でブラウザにはない「ファイルシステムへのアクセス」などの機能を使うことができます。 const fs = requir…

インターンで実施しているプログラミング講座の資料を一般公開します。 インターンや新卒社員向けの講座コンテンツは多いですが、ゼロ知識から読めるものは数が限られます。 インターンでの講座受講者や、他社のセミナーなどにもぜひご活用ください。 プログラミングコース プログラミングコースは「タイピングができる」レベルの受講者を対象に、Webアプリ開発を簡易体験できるコースです。 スライド資料 slides.com 講座資料＆チュートリアル iplanning.hatenablog.jp iplanning.hatenablog.jp 業界研究コース 業界研究コースは、簡易版のプログラミング概要と、レゴス…

前編はこちら Vue.jsのセットアップ 引き続き、CodePen上で作業を行います。 画面右上のSettingsを選択します。 ダイアログが表示されたら、JavaScriptタブを選択し、Search CDNjs欄にvueと入力します。 するとリストにvueが表示されますので選択します。 上記のようになればOKです。Closeを選択してください。 Vue.jsをサンプルで学ぼう ここから先は、下記の繰り返しでVue.jsの役割について理解します。 まずサンプルアプリを触ってみる サンプルアプリの完成一歩手前のものを開く 説明に従って完成させる 最初のサンプル See the Pen Basi…

HTML, CSS, JSを個別に学習してWebアプリを作れるようになるまでには、少し時間がかかります。 学ぶ内容にもよりますが、公開できるレベルのアプリを作ろうと考えれば、最低でも２ヶ月は必要でしょう。 基礎はもちろん大事ですが、目的地をはっきりさせて興味を持続させることも、挫折を防ぐ意味で大事なことです。 今回は、 基本をすべて飛ばした上 でいきなり Vue.js というフレームワークを使うチュートリアルを公開します。 本講座で概要を掴んだ上で、おすすめの書籍を購入いただき、基礎をキャッチアップしてみてください。 CodePen CodePenを開く CodePenとは、HTML, CSS…

インターンシップの開催にあたり、PCの開発環境のセットアップを手順化しました。 セットアップ対象 Windows 10 Pro 64bit セットアップするツール一覧 scoop git Node.js yarn VS Code Chrome Scoopでのインストール セットアップはscoopで行います。scoopを使う理由としては、管理者権限を必要としないためです。 （別のオプションとしてchocolateyを使うこともできます） https://scoop.sh/ まず、Powershellを起動します。Win + Rからファイル名を指定して実行、powershellを入力すると起動しま…

２年目若手が新人研修のときに作ったC#の麻雀ゲームを Web版として移植してもらいました。 ゲームはスマートフォンでもプレイできるようになっておりますので、 ぜひ遊んでみてください！ フレームワークにはVue.jsを利用しています。 また、聴牌判定ロジックにこだわりがあるとのことで、 ロジックについても解説記事を書いてもらいました。 ゲームを遊ぶ 清一色の練習をするためのゲームです。 こちらで遊べます。 Chromeで動作確認を行っております。IEなどのレガシーブラウザでは動作いたしません。 作成物概要 麻雀とは 34 種 136 牌を使用するゲームです。手牌 13 枚から始まり、1 枚引いて…

一年目の若手エンジニアに、データビジュアライゼーションのトレーニングを兼ねて、SVGでグラフを作ってもらいました。 作成物概要 総務省統計局の平成29年11月時点の人口データを元に各年齢ごとの人口を男女別にグラフを作成しました。 横軸に年齢（5歳ごとの分類）、縦軸に人数(単位:千人)で男女別で表示しています。男性を青、女性を赤、合計を灰色に設定しています。 また、縦軸最大値と人口の最大値をあわせたり、グラフの大きさをウィンドウサイズ丁度に表示されるように作成しました。 SVGの基本的な使い方 SVGタグの中にSVG要素を書いていきます。具体的には以下の通りです。 <svg viewbox="0…

１０年前にIPL社員が作ったJava製のシューティングゲームを、Web技術を使ってリメイクしました。 また、JavaからTypeScriptへの移植のポイントについても記載します。 何はともあれゲームを遊ぶ 以下のURLからプレイできます。 https://iplanning.heteml.net/2018-shooting/ Chrome, Firefox, Edgeブラウザで動作確認しております。スマートフォンには非対応です。 操作方法 スペースキー：ゲーム開始＆弾を撃つ カーソルキー：上下左右に移動 ハイスコアはお使いのブラウザ内（LocalStorage）に記録されます。 経緯 アイプ…

GitLab で CI（継続的インテグレーション） をできるようにしました。 経緯 弊社では数年前から開発の助けとなるよう GitLab CE を運用しています。 社内で GitHub 同様にプロジェクト管理ができ開発作業に貢献してきました。 一方で、アプリの検証や納品といった作業のほとんどは手作業で行っていました。 手作業というのはとても温かみのある行為ですが、 同時にヒューマンエラーが入り込む温床となります。 また、それらの時間が削減できれば、その時間を開発に割り当てることができます。 そこで、検証や納品といった作業を自動化すべく GitLab で実現できる CI（継続的インテグレーション…

アイプランニングのホームページのビルド環境を、JekyllからHugoに置き換えました。 経緯 Jekyllは、非常に人気のある静的サイト生成ツールです。 当ホームページも、Jekyllで生成していました。 ただし、アイプランニングのホームページのような、非常にシンプルなサイトでも ビルドに若干時間がかかってしまう（手元ではフルビルドで６秒以上）という問題がありました。 また、社内はWindowsユーザが大半で、Rubyを使うにあたって敷居が高いという問題もありました。 もう少しお手軽なものに乗り換えようと考え、下記の静的サイトジェネレータを検討しました。 検討した静的サイトジェネレータ Me…

2018年卒の学生に向けて、一日インターンを実施しました。 業務内容の説明や業界説明、先輩社員との交流など、盛りだくさんの内容でしたが、 今回は業務体験の一環として実施した、「レゴによるスクラム体験」コーナーの内容をご紹介します。 概要 今回のインターンは、一日という短期間ですし、 プログラム未経験の学生も対象としていたので、 実際にプログラム開発の体験を行ってもらうのは、時間的に無理でした。 その為、「LEGO4SCRUM」というトレーニング手法を実施することにしました。 LEGO4SCRUMとは LEGO4SCRUMは、「業務経験者」に向けた、スクラムのトレーニング手法です。 実施方法はW…

会社で Intel NUC (NUC6i5SYH) を購入してもらいました。 組み立てとWindows10のインストール、ドライバインストールやBIOSアップデートについて紹介します。 使っていたデスクトップ用のWindowsPCが不調で、PCを新調する必要があったので思い切ってIntel NUCを買ってもらいました。 NUC本体にはメモリとストレージが入っていないため別途購入となります。 メモリは32GB、SSDは512GBのものを購入しました。 Mac Miniと比較するとその小ささが際立ちます。 デスクの上にこの2台を置いてもすっきりしてて良い感じです。 控えめに言って最高なので、今後も…

これからのソース管理のスタンダード「Git」についてご紹介します。非常に多機能なツールですので、必要最低限のコマンドのみご説明します。 Gitを始めよう ソースバージョン管理ツールには、「Subversion」「CVS」「VisualSourceSafe」など数多くあり、プロジェクトの特徴に合わせて使い分けられてきました。 近年、急速にGitが使われるようになり、今やソース管理のデファクトスタンダートとなりつつあります。今後新規案件でSubversionやCVSが使われることはなくなっていくと考えられます。 ただし、Gitは取っつきにくい点が多いのが難点です。Gitの考え方及び、コマンドライン…