イベントが多いこの時期に使える小技

こんにちは！OthloTechのたつまです。
advent-calendarも17日目となり、来週はクリスマスイブですね！

今回の記事は、最近、ハッカソンとかアイデアソンとか、startup weekendなんかで、チームで何かを作るときに使うと良いよーと思える技術を紹介します！
あ、深い技術のことは他の人が紹介してくれているので、自分は簡単な概要だけにします。
チームで技術選定するときに参考になればと思います。


##ハッカソンとは？

ハッカソン」（hackathon）とは、広い意味でソフトウェアのエンジニアリングを指す“ハック”（hack）とマラソン（marathon）を組み合わせた米IT業界発祥の造語で、もともとはプログラマーやデザイナーから成る複数の参加チームが、マラソンのように、数時間から数日間の与えられた時間を徹してプログラミングに没頭し、アイデアや成果を競い合う開発イベントのことを言う</br>
企業や各種団体によって開催されることが多く、近年はIT業界以外の分野にも拡大。</br>
組織の壁を超えて優れた発想を取り込み、新しい商品やサービスの創出につなげる“オープンイノベーション”の手法の一つとして、日本国内でもさまざまな企業が活用し始めています。

by[weblio辞書](http://www.weblio.jp/content/%E3%83%8F%E3%83%83%E3%82%AB%E3%82%BD%E3%83%B3)

***

##対象者

- ハッカソンに出たことないよー
- これからチームを組んで出ます！
- 今までに出てきたけど、貢献できなかった
- チームをうまくまとめてプロジェクトを進めて行きたい
- etc...

***

##技術選定

- PHP
  - [FuelPHP](http://fuelphp.jp/)
   
> [CodeIgniter](https://codeigniter.com/)を参考に開発された、FuelPHP（フューエルピーエイチピー）です。まだ新しいフレームワークで、2011年にリリースされたばかり。MVCモデルを採用していて、高速に動作することが特徴です。規約より設定、という設計思想もよく知られています。学習コストも低く、スピーディに開発に取りかかることができます。小規模案件向けのフレームワークと言えるでしょう。

  - [Laravel](http://laravel.jp/)
  
> PHPフレームワークの中でも、最近注目を浴びているのがLaravel（ララベル）です。海外での普及スピードがダントツで、日本国内でも今後ユーザー数が伸びてくることが予想されます。他のフレームワークと比較すると日本語の情報は多くはないのですが、クセもなく、習得するまでの難易度は高くはありません。その割にライブラリも豊富で、機能追加も頻繁に行われています。


  - [CakePHP](http://cakephp.jp/)
  
> CakePHP（ケイクピーエイチピー）はオープンソースのフレームワークです。Ruby on Railsの影響を受けていて、ウェブアプリケーションの開発を高速で行うことに主眼をおいています。国内でも頻繁に採用されているので、日本語の書籍やチュートリアルなどの情報が豊富なこともメリットの一つ。学習にかかる労力も、他のPHPフレームワークよりは少ないかと。PEARなどのライブラリがなくても動作するので、設置も簡単。

- Ruby

  - [Ruby on Rails](http://rubyonrails.org/)
  
> Rubyのフレームワークにおいて最も有名なものとは何かと言えば、このRuby on railsです。Ruby on RailsはRubyという言語が多くのプログラマーに愛されるようになったきっかけを作ったフレームワークだから。Railsという非常に簡単にWebアプリケーションを作ることができるフレームワークが作られたことをきっかけに、プログラマーに圧倒的な指示を受けて活発に使われるようになり現在では、日本の多くスタートアップが自分たちのWebアプリケーションの開発の為に導入するフレームワークの第一候補になっている。情報量も豊富だ。また、比較的簡単なので、スタートアップが選択しやすいのだろう

  - [sinatra](http://www.sinatrarb.com/intro-ja.html)
    > Sinatraも、Rubyで記述されているオープンソースのWebフレームワーク。このRubyフレームワークは最も少ないコードの記述でアプリケーションを開発するために作られています。非常に手軽で学習コストも低くWebアプリケーションとは？を理解する為には使い勝手のいいフレームワークになっている。とにかく単純なものに使うのをオススメする。例えばYoutubeのあるチャンネルを自動再生し続けるサイトなど。反面、複雑なサイトには向いていない。

  - [Cuba](http://cuba.is/)
   > Cubaというフレームワークもある。シンプルで素敵なデザインのホームページからも察することができるが、シンプルで軽量なフレームワークだ。「小さく」「軽量」「早い(実行速度)」というは良いということを元にしたのがCubaというフレームワーク。その他のフレームワークよりもシンプルな構造であり、軽量であり、実行速度は速い。そのため、とても軽量なアプリケーションを開発したい考えるなら、Cubaがおすすめだ。

  - [Ramaze](http://rameze.net/)
   > RamazeはシンプルなRubyフレームワークで「ラマゼ」と読みます。Ramazeは、KISSの原則(Keep it simple, stupid/シンプルにしろ！)やPoLSの法則(Principle of least surprise/驚き最小の法則)などの法則というか概念を取り入れたフレームワーク。プログラミングをしていく上で複雑なコードを書かずにアプリケーションを開発していくことが可能になるように、構築している。また、Rubyの書き方を極力そのまま使えるように作成されている。こちらもSinatoraと同様に、自由度の高さに重きをおいたフレームワーク。カンタンに、シンプルにまずはアプリケーション開発をしたいと考えているなら、Ramazeはおすすめだ。

- Javascript
  - [AngularJS](https://angularjs.org/)
    > AngularJSはGoogleによりMVWアーキテクチャ(Wはwhatever)を採用して作られたJavaScriptフレームワークで、JavaScriptフレームワークの中で人気実績ともに最も注目されています。MVWフレームワーク,HTMLテンプレート機能 => 仮想DOM,双方向データバインディング => 単方向 + 双方向,その他にも、ルーティング機能や、処理に依存するデータなどを外部から注入するといった機能的特徴があります。

  - [Backbone.js](http://backbonejs.org/)
    > Backbone.jsは、MVCアーキテクチャを採用したJavaScriptフレームワークで、軽量に動いてくれることが特徴です。その取り回しの良さから、Backbone.js単体で構築されるというよりViewの部分をReact.jsやvue.jsに任せ、controllerやmodelの債務を負うといった形で組み合わせて使われることが多いようです。

  - [Knockout.js](http://knockoutjs.com/)
    > Knockout.jsを一言でいうと、「MVVM(Model-View-ViewModel)パターンをサポートするためのJavaScriptフレームワーク」です。それ自身が純粋なJavaScriptで作成されているため、Webサイト・Webアプリケーションに簡単に導入することができます。Knockout.jsはフレームワークなので、jQueryのようなJavaScriptライブラリとは基本的に別物です。共存させることも可能です。これまでDOM操作の大部分をjQueryベースで実現していたようなケースでは、そのほぼ全てをKnockout.jsに置き換えることができます。そしてjQueryを使った場合よりも、HTML、JavaScriptの両者のコードを分離しやすくなるはず。

  - [jQuery](https://jquery.com/)
    > JavaScriptのライブラリなので、ここに分類するのかどうかは怪しいのですが、一応書いておきます。数多くのWebサイトや、小〜中規模のWebアプリケーションで主に利用されています。もはや、jQueryを使っているWEBサイトの方が普通といえます。手軽さと学習の容易さが特徴。まず、WEBページのメニューやアイコンにアニメーションや効果を簡単に追加できるので、デザイナーの方にもよく利用されます。また習得が容易で利用数も多いので、JavaScript初心者の方がライブラリ入門として学習にも最適です！

  - [React.js](https://facebook.github.io/react/)
    > React.jsはFacebook社製のOSSなjavascriptライブラリです。Angularに次いで用いられているJavaScriptフレームワークで、Facebookはもちろん、airbnbやinstagram, yahoo!といった有名サービスのフロントの部分で用いられていることでも有名です。JUST THE UI,仮想DOM,単方向データバインディングの特徴を持ちます。

  - [node.js](https://nodejs.org/ja/)
    > Node.jsはサーバー通信専用のライブラリです。大量の通信を高速で処理することできます。非同期通信に特化しているので、特に接続が多い大規模のアプリケーションや、リアルタイム通信を行うアプリケーションで利用されています。Node.jsを使うことで、高速に動作するアプリケーションを作ることができます。非同期通信で処理を行うことを前提としているため、通信待ちなどが発生することが少なく、次々に大量の通信を処理することができます。そのため、リアルタイム通信を行うことが可能となっており、SNSやチャットなどのアプリケーションに利用されています。今一番人気が高いライブラリといっても過言ではありません。

- そのた
  - [Django](http://djangoproject.jp/)
    > 「Django（ジャンゴ）」とは、Pythonで作られている機能満載のWEBフレームワークです。Djangoを使うことで、高品質なWEBアプリケーションを簡単に少ないコードで作成することができます。シンプルなWEBアプリであれば、数分で作ってしまうことも可能です。

  - [PlayFramework](https://www.playframework.com/)
    > Play FrameworkはGuillaume Bortによって開発されたWebアプリケーションフレームワークだ。Javaだけでなく、ScalaというJavaと親和性の高い言語でも使用することができ,軽量さと高い生産性が特徴。JavaのWebアプリケーション標準仕様であるJ2EEに準拠しておらず、ServletやJSPを使わずに新しいアプローチでのアプリケーション構築を行うことができる。

- モバイルフレームワーク
  - [phoneGap](http://phonegap-fan.com/)
    > ニトビ・ソフトウエア社によってPhonegap（フォンギャップ）として開発が始められ、その後アドビシステムズがニトビ・ソフトウェア社を買収したことによりPhoneGapはAdobeのプロダクト.モバイルデバイスのカメラ、GPS、加速度センサーなどにアクセスするためのAPIを追加することにより、JavaScript、HTML、CSSといったウェブアプリケーション開発の技術でモバイルアプリケーションを開発することができるのが特徴。

  - [Titanium](http://install.titanium-mobile.jp/)
    > Appcelerator社が提供しているクロスプラットフォームなアプリケーションの開発環境。iOS(iPhone,iPad)/Android用アプリケーションの開発環境であるTitanium Mobileや、Windows/Mac/Linux用アプリケーションの開発環境であるTitanium Desktopなどがある。

  - [cordova](https://cordova.apache.org/)
    > ハイブリッドアプリ開発するもので、スマートフォンアプリの業界内でCordovaなどを用い、Web技術で開発した通常のアプリを示します。スマートフォンでは、ブラウザエンジンのライブラリがサポートされていて、組込みブラウザ（WebView）上で動作するソフトウェアを作成できます。実は、このような実装方法は昔からありIEのエンジンを組み込んだWindowsアプリなどがあったように、技術的にはそれほど先進的なものでも、画期的なものでもなく十分枯れた手法といえます。

- ゲームエンジン
  - [Unity](http://japan.unity3d.com/)
    > game開発といえばこれ！使っている人も多いはず。Unityとは、ユニティ・テクノロジーズ社が提供する、ゲーム開発プラットフォームです。Unityは、3Dゲーム開発の手軽さとその物理エンジンが有名ですが、2Dゲーム開発にも対応しています。無料版でもかなりのクオリティのゲームなどが作れます。最新版では、無料版でできることが大幅に増えたので、商用を具体的に考えてない段階では無料版で十分でしょう。

  - [Cocos2dx](http://jp.cocos.com/)
    > Cocos2d-x は 2D/3D ゲーム開発用のゲームフレームワークです。AppStore や GooglePlay などで販売されているスマホアプリには、Cocos2d-x を使って開発したタイトルが数多くあります。開発言語は、C++11 だけでなく JavaScript や LUA にも対応しております。

***

##ディレクション・コミュニケーション

- ディレクション/タスク管理
  - [trello](https://trello.com/)

 > ふせんを貼ったりはがしたりする感覚で、タスクが管理できるツールです。タスクひとつひとつを「Card（カード）」として登録し、「Board（ボード）」と呼ばれている場所で管理します。そしてタスクの進捗ごとに、未着手・着手・確認待ちといった「List（リスト）」に移していくことで、ステータスを管理できます。まあまあ使えるw

  - [Redmine](http://redmine.jp/)
    > Redmineはオープンソースのプロジェクト管理ソフトウェアです。 タスク管理、進捗管理、情報共有が行えます。 ソフトウェア開発やwebサイト制作等のITプロジェクトをはじめ、汎用性が高いため幅広い用途に活用できます。rubyで書かれているはず...

  - [Waffle.io](https://waffle.io/)
    > Waffle.ioはタスク管理ツールです。Githubに標準で付いているタスク管理ツールGithub Issuesをカンバン方式で表示するツールです。Githubを使う場合に合わせて使いたいです。

  - [github issue](https://github.com/)
    > お馴染みの[github]です。その機能の一つである「Issue」は、日本語訳すると「問題」や「課題」といった意味がありますね。GitHubのIssues機能もその名の通り、プロジェクトやソースコードの課題を管理するための機能です。

  - [Backlog](http://www.backlog.jp/)
    > Backlogは、オンラインのサービスで、アカウントさえ取得すれば誰でもかんたんにプロジェクト管理がスタートできます。10ユーザーまでは無料なので、まずプロジェクト管理を試してみるという用途には最適かと思います。また、Backlogにはガントチャートやバーンダウンチャート、Wiki、バージョン管理（Gitも対応）などの機能がありますが、今回はこのなかで課題管理を中心に取り上げたいと思います。

- コミュニケーション
  - [slack](https://slack.com/)
    > Slackは2013年8月のリリース後、わずか2年半でDAU200万を突破、2016年5月時点ではDAU300万を突破した、アメリカ発のサービスです。チームでも1対1でも、ストレスのないリアルタイムのコミュニケーションができる.パソコン、スマホ、タブレットなど、閲覧環境を選ばずサクサク使える.過去のやりとりの中であとで参照したいものを保存でき、検索も簡単.画像を含めたどんな種類のファイルでも、手軽に共有できる.業務で使用している他のサービスと連携させ、仕事を効率化することができる.オリジナルの絵文字を作ったり、カスタマイズして楽しめる。エンジニアなら使うべし！

  - [Chatwork](http://www.chatwork.com/)
    > クラウド型ビジネスチャットツール。ChatWork。メールやSkypeなどのチャットツールの使いにくかった部分を解決したもの。iPhone、Androidなどのスマートフォンにも対応している。キャッチコピーは「メールの時代は終わりました」slackの日本語版みたいな感じ。英語が苦手な文系の方がいる場合はこっち

  - [gitter](https://gitter.im/)
    > GitHub専用のコミュニケーションツール。百聞は一見にしかず

***

##開発環境

- 開発環境
  - [MAMP](https://www.mamp.info/en/)
  
  > Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト。

  - [XAMPP](http://osdn.jp/projects/xampp/)
    > ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されている。 主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある

  - [Vagrant](https://www.vagrantup.com/)
    > Vagrant を一言で表すと「仮想マシーンをとても簡単シンプルに構築するソフトウェア」です。 Linux, Windows, Mac 上に仮想マシーンを簡単に構築できます。

  - [VMware](https://www.vmware.com/jp)
    > 1台のコンピューター上で、複数OS(オペレーティング・システム)の実行を可能とする仮想マシンのソフトウェアのうちの一つ。vagrantとともに使われることが多い。というか、一緒に使われる

- Pass
  - [IBM Bluemix](https://console.ng.bluemix.net/)
    > Bluemix は、IBM による最新のクラウド・オファリングです。Bluemix を使用すると、組織や開発者は迅速かつ簡単にクラウド上でアプリケーションを作成、デプロイ、管理することができます.

  - [Microsoft Azure](http://azure.microsoft.com/ja-jp/)
    > Microsoft Azureはマイクロソフトのデータセンターにあるクラウド プラットフォームで、アプリケーションとデータをホストしている

  - [heroku](https://www.heroku.com/)
    > heroku（ヘロク）とは、PaaS（Platform as a Service）と呼ばれるサービスで、アプリケーションを実行するためのプラットフォームです。つまり、サーバやOS、データベースなどの「プラットフォーム」と呼ばれる部分を、インターネット越しに使えるようにしてくれるサービスの一つです。レンタルサーバーとPaaSは「環境を貸してくれる」という意味では一緒なので、ほぼ同じと考えても問題はありません。レンタルサーバサービスの進化版（プラットフォームレンタルサービス）のようなものと捉えるとひとまずはわかりやすいかもしれません。無料版でもかなり使えますよーOthlo代表オススメ

***

##共有・バージョン管理

- 共有・バージョン管理
  - [github](http://github.com/)
   
  > 迷ったらコレ！とりあえず、コレ！使うべし！GitHubは、その名の通り、「Git」の「ハブ：拠点・中心・集まり」です。GitHubは、Gitの仕組みを利用して、世界中の人々が自分の作品(プログラムコードやデザインデータなど)を保存、公開することができるようにしたウェブサービスの名称でGitHubはGitHub社という会社によって運営されており、個人・企業問わず無料で利用することができます。GitHubに作成されたリポジトリ（保存庫のようなもの）は、基本的にすべて公開されますが、有料サービスを利用すると、指定したユーザーからしかアクセスができないプライベートなレポジトリを作ったりすることができます。

  - [bitbucket](https://bitbucket.org/)
    > ほとんどgithubと同様。個人としてもプライベートリポジトリをいくつも作れるのが特徴

  - [dropbox](http://dropbox.com/)
    > Dropboxはクラウドストレージとして有名なサービスです。インターネット上に自分の知りたい情報やファイルを保存できるサービスのことをクラウドサービスと呼びますね。一方、ストレージとは英語で倉庫や収納場所を意味します。つまり、ネット上でファイル類を保存や収納できる場所のことをクラウドストレージと呼びます。データをハードディスクやSDカードに保存するのと同様にネット上に保存でき、なおかつネットにつながっているスマートフォンやタブレット、パソコンだったらどこでもデータにアクセスできるのがクラウドストレージの魅力。

  - [Google drive](https://www.google.com/intl/ja_jp/drive/)
    > 写真やドキュメントなど、ファイルのクラウド ストレージとバックアップ.dropboxと似ているよ。使っている人はこちらの方が多いイメージ

***

##モック・デザイン・設計

- モック・デザイン
  - [moqups](https://moqups.com/)
  
  > 英語のサイトですが、web上で手軽に操作できます。アカウント登録することでローカルからアップロードした画像をワイヤーフレーム内で利用したり、作成したものをPDFやPNG形式でダウンロードすることが可能です。

  - [inVision](http://www.invisionapp.com/)
    > InVisionはアプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービスです。inVisionにデザインやワイヤーフレームをアップすることで、デザインに対してのコメントやログを共有することができます。アプリのプロトタイプを作る際によく使われているイメージのあるinVisionですが、デザインのチェックツールとしても活用できます。

  - [Mockup Builder](http://mockupbuilder.com/)
    > 簡単に使えると思いきや、基本英語なので、辛い思いもする人もいるかも。

  - [Pixate](http://www.pixate.com/)
    > Pixate は高機能かつリッチなアニメーションが利用できるツールとして注目されています。 POP や prott と比較して機能が豊富な一方、複雑かつ設定できる項目が多いため、ややとっつき辛い印象があるかも。こちらも英語のみで辛いかも。

- 設計
  - [Cacco](https://cacoo.com/lang/ja/)
    > 日本語で利用でき、グループでチャットをしながら作業も可能な多機能サービスです。細かいチュートリアルがあるため、操作の手順をいつでも確認することができます。また、他のユーザーが作成した画像を購入あるいは無償でダウンロードして、作成の際に使用することも可能です。利用するには会員登録が必要ですが、メールアドレスでの登録以外にもtwitterやFacebookとの連携もできるようになっています。作成したものはPNGやPDFで出力することができます。

  - [Mysql Workbench](https://www-jp.mysql.com/products/workbench/)
    > データベースアーキテクト、開発者、DBA のための統合ビジュアルツールです。 MySQL Workbench は、データ・モデリング、SQL 開発、およびサーバー設定、ユーザー管理、バックアップなどの包括的な管理ツールを提供します

***

##プレゼン

- プレゼン
  - [Reveal.js](http://lab.hakim.se/reveal-js/)
  
  > htmlで綺麗でカッコいいプレゼンテーションを作れるフレームワーク。DLで落としてきたら、あとは書きたいことを書けばok!

  - [speaker deck](https://speakerdeck.com/)
  
  > スライド共有サイトで、slideShareと似ている。slideShareはFlashが使われているのだが、こちらは、javascriptが使われている。

  - [Prezi](https://prezi.com/)
  
  > 次世代のプレゼンといえば、これ！説明するよりも使って見た方が早いかもしれない。まるで映画のカメラワークのように、ぐぐっとズームしたり、ぐるぐるまわったり、なかなかに派手なアクションで見せてくれる。この映像作品のような見せ方がPreziの最大の魅力です。
    
***
# 最後に
きになるキーワードがあれば、ぜひ調べてみてください。同じ言語でもフレームワークによって、全く違うものにもなっているので、奥深く知ることもできますよ。


さて、明日18日目は[ragrog](http://qiita.com/ragrog)さんです！
お楽しみに！

[OthloTech Advent Calendar](http://qiita.com/advent-calendar/2016/othlotech)もいよいよラストスパートに入ります！
名古屋の優秀な学生が情報発信しているので、どんどん交流していただけると幸いです。