どうも、まさとらん（@0310lan）です。 今回は、これからJavaScriptを学習しようという人や、ちょっとしたプロトタイプを開発したい人に向けて、オススメの「オンラインコードエディタ」を厳選してご紹介しようと思います！ 選んだ基準としては…、 SSL対応のWebサービス JavaScriptの実行環境が備わっている 作成した「コード」や「作品」の公開が可能 面倒なログイン不要ですぐに使える 無料で利用できる …などの点を重視しながら、誰でも「ブラウザ」さえあれば今すぐ使えるモノをまとめてみたので、ご興味ある方はぜひ参考にしてみてください！ ■Webページとしても公開できる実用的なエディタ！ 【 PLAYCODE 】 「PLAYCODE」は、まだ新しいサービスですが、JavaScriptプログラミングの学習はもちろんのこと、ちょっとしたプロトタイプの開発に最適なコードエディタと言える

どうも、まさとらん（@0310lan）です。 今回は、ブラウザ上からWeb制作などで便利に使えるミニツールを190以上も搭載した異色のWebサービスをご紹介しようと思います！ 特に、ファイル関連のジェネレーターやコンバーターが豊富に揃っているのが特徴で、コンソールからタスクランナーなどを起動する必要もなく、フロントエンド側だけでちょっとした制作を行うのに最適だと思います。 【 BeautifyConverter 】 「BeautifyConverter」は、主にファイルの「圧縮」「整形」「変換」などから「構文チェック」「画像変換」「各種ジェネレーター」…など、多種多様な便利ツールが揃っています。 登録不要で、誰でも今すぐブラウザから利用できるので、ブックマークしておいて損はないでしょう！ ■基本的な使い方！ 「BeautifyConverter」の基本的な使い方を実際に試しながら、どのよう

どうも、まさとらん（@0310lan）です。 みなさんは、「ゲーム開発」にご興味あるでしょうか？ 最近人気の「Unity」みたいな統合開発環境があれば、かなり本格的なゲーム作りが個人でも可能になってきましたが、実はこのような統合型の開発環境をブラウザ上で実現するサービスがいくつか存在します。 そこで今回は、用途別に厳選したオススメのサービスをご紹介しようと思いますので、ご興味ある方はぜひトライしてみてください！ ■本気で作り込める「2Dゲーム」開発環境！ 【 WiMi5 】 ゲームに使う「ステージ」作りをグラフィカルに設定し、キャラのアニメーションやメインのゲームロジック、最終的な書き出しまですべてカバーする統合開発環境が「WiMi5」です。 シューティング、RPG、パズル、アクション…など、基本的に2Dゲームならどんなゲームでも制作可能で、すでに多くのユーザーが多彩なゲームを公開していま

どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式

こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブサービスを作るにはどのような方法があるでしょうか？ 言語は、PHP、Java、Ruby、Python、JavaScript・・・ フレームワークは、Laravel、Ruby on Rails, Struts・・・ フロントエンドは、jQueryUI、Sencha、AngularJS、React・・・ データベースは、MySQL、PostgreSQL、MongoDB・・・ プログラムを簡単・効率よく開発するために、様々な言語・フレームワーク等がありますが、いずれにしても「プログラム」を書く必要があります。 今回紹介するBubble.isは「プログラム不要」で、「ウェブサービス」が作れるサービスです。繰り返しますが、「ウェブページ」ではなく、「ウェブサービス」です。 bubble.is データベースを操作するこ

どうも、まさとらん（@0310lan）です。 今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。 「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません。 そこで、簡単なサンプルアプリを作りながら、自分だけのChromeアプリ開発に挑戦してみましょう！ ■Chromeアプリとは？ 開発を始める前に、まずは予備知識としてChromeアプリの「種類」についてご紹介しておきます。 実は、「Chromeアプリ」と言っても、いくつか異なる種類があります。 例えば、「Appspector」というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。（https://chrome.google.com

Photo by Oferico 皆さんはアルゴリズムやデータ構造について勉強したことはありますか？そして、基本的なアルゴリズムについて、どのようなものがあって、どのようなときに使うとよいかといったことを説明することができますか？ 仕事をしていると、プログラミング言語等の勉強や業務に忙しくて、正直アルゴリズムどころではないという場合がほとんどでしょう。しかし、いつか勉強しようと思っていたけど、基本的なアルゴリズムにどんなものがあるのかなんて今更聞けないな……ということもあるかと思います。 今回はそんな方に向けて、基本的なアルゴリズムの一部の概要に加え、アルゴリズムの勉強に役立つサイト、書籍をご紹介したいと思います。 ■アルゴリズムを学ぶ意味 例えば、ソート等については、通常はすでにソート関数があるので、自分で作らなくても済む＝アルゴリズムも勉強しなくていいと思ってしまうかもしれません。しか

Photo by jmettraux こんにちは。谷口です。 「プログラミングを勉強してみたい」という方はたくさんいらっしゃるかと思います。その一方で、全く未経験のプログラミングを独学で学んでいくということに対して、「ハードルが高いな～」と感じる部分もあると思います。 そこで今回は、Web上でプログラミングの基礎を学べるサービスや、ブラウザ上でコードが実行できるサイトをまとめてみました。今はほぼ無料の学習サイトでも、未経験からWebアプリを作れるレベルのことまで学べるサービスがたくさんあります。 プログラミング学習というのは、コストをかけなくとも充分に初めの一歩を踏み出すことができますのでぜひ挑戦してみてください！ ■プログラミングを学びたい人がつまずきやすいポイントと課題 プログラミングを学ぼうとしている方は、以下のようなポイントでつまずいたり、課題を抱えたりしている方が多くいらっしゃる

Photo by Matt Ryall こんにちは。谷口です。 ITエンジニアの皆さんや、プログラミングを学習中の皆さんは、プログラミング問題を解くのはお好きでしょうか？（お好きな方が多い……と信じております……） プログラミングが好きな方の中には、「業務とは直接関係ないけどプログラミング問題をもっと解きたい！」また、「プログラミング初心者で勉強中だから、問題をたくさん解きたい！」という方もいらっしゃるかと思います。 また、競技プログラミングがお好きで既にばりばり挑戦されている方や、競プロに挑戦してみたいけど「まだ初心者だしいきなり挑戦するのはハードル高いな……まずは自分の実力アップのために練習したい！」という方も、ちょうどいいレベルのプログラミング問題が必要になってくるかと思います。 （※競技プログラミングとは、一般に、出題されたプログラミング問題を制限時間内に解いて競い合う競技大会のこ

Photo by aimee rivers こんにちは。谷口です。 4月にから新人ITエンジニアになられた皆さん、研修やお仕事はいかがでしょうか？ 今回は、新人ITエンジニアの皆さんがこのGWに読むのにお勧めな書籍を11冊ご紹介いたします。よかったらGWのまとまった時間や帰省のお供として読んでみてくださいね！連休明けからの業務や今後の開発に役立ちますよ！ ■GitHubについて ◆1.Web制作者のためのGitHubの教科書 Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール 作者: 塩谷啓,紫竹佑騎,原一成,平木聡出版社/メーカー: インプレス発売日: 2014/10/24メディア: 単行本（ソフトカバー）この商品を含むブログ (3件) を見る最近、特にWebサービスやアプリ開発をしている企業では、多くがユーザーの反応を見て機能追加やバグ改修を行うといったス

(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ

Photo by dotConferences こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「JavaScriptを使えるようになりたい！」という方は多いと思います。 JavaScriptは実行環境が主にWebブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられます。（JavaScript - Wikipedia） Webサービスの作成・運用をする機会がある方には必要不可欠なJavaScriptですが、これから勉強を始める方の中には「プログラミング経験ゼロなんだけど、一体どうやって勉強したらいいの……？」と思っている方も多くいらっしゃるのではないでしょうか。中には「エンジニアではないんだけど、仕事でJavaScriptを触る機会があるから覚えたい！」という方や、「初心者だけど、なるべくコス

こんにちは、吉岡(@yoshiokatsuneo)です。 最近のJavaScriptフレームワークといえばAngular.JSやReact.JSがホットですが、今年来ると思われるフレームワークAurelia.JSが2015年1月末リリースされました。 Home | Aurelia Aurelia.JSはGoogleでAngularJSの開発に関わっていたRob Eisenbergさんが開発した次世代のJavaScriptフレームワークです。 特徴として、最新のJavaScript関連技術であるECMAScript6、WebComponents、Object.observeなどの機能を取り込むことで、シンプルで使い勝手のよいフレームワークになっていることが挙げられます。 オンラインコーディング環境paiza.IOでも利用しているAngularJSとの比較を中心にして紹介します。 ■Aurel

Photo by ITU Pictures こんにちは。谷口です。 プログラミング初心者の方々、プログラミングを学びたい方々は、普段どのような方法で学習をしていますか？ 最近は、Web上でコーディングができるサイトや、プログラミングを学習できる動画コンテンツなど、独学での勉強に役立つサービスが増えてきました。そこで今回は、初心者でも独学でプログラミングの基礎を楽しく学べるサービスを11件ご紹介いたします。 ■初心者でもプログラミングして実行できる！学習サイト ◆1.Codecademy http://www.codecademy.com/learn 学習可能言語：HTML/CSS、Ruby、Python、PHP、JavaScript、jQuery 対応言語：英語（一部日本語） 料金：無料 Codecademyは、実行環境を構築しなくても、書いたコードを実行できます。サインインすると実際にW

Photo by HeatSync Labs こんにちは。谷口です。 プログラミングをこれから学ぼうとしている方で、「人気のRubyを勉強してみたい！」という方は多いと思います。 Rubyは『オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。 エレガントな文法を持ち、自然に読み書きができます』とされています（オブジェクト指向スクリプト言語 Ruby）が、やはり「プログラミング経験ゼロからいきなり勉強を始めるには敷居が高いな……」と思っている方も多くいらっしゃるのではないでしょうか。また「できれば独学じゃなくてスクールに通いたいけど、コストは押さえたいんだよな……」という方もいらっしゃるかと思います。 そこで今回は、プログラミング未経験～初心者の方が、なるべくコストをかけずに楽しくRubyに触れられて、学習に役立てられるコンテンツを10件ご紹介していきます。

Photo by Linux Screenshots こんにちは。谷口です。 エンジニアの皆さんは、プログラミングをする際にどんなフォントを使用していますか？ 「特にこだわりないからデフォルトのまま」という方も多いとは思いますが、プログラミング中は大量の文字を読んだり書いたりし続けるわけですから、なるべく可読性が高くてストレスが少なく、また自分の気に入ったフォントを見つけた方がよいのではないでしょうか。 そこで今回は、エンジニアの皆さんにお勧めの、プログラミングに最適な無料フォントを11個ご紹介いたします。 ■どういうフォントが見やすいの？ フォントには、セリフ体というものとサンセリフ体というものがあります。 セリフとは、文字の線の端につけられる「ひげ」のような、線・飾りのことを言います。 例えば、上の図でいいますと、上のフォント（MS明朝）がセリフ体、下のフォント（MSゴシック）がサンセ

Photo by Jason Cartwright こんにちは。谷口です。 プログラミングの勉強で「ちょっとあの開発言語の勉強をしてみたいな～」「実際にコードを書いて動かしてみたいな～」という時に、ハードルとなるのが「実行環境の作成」だと思います。 そんな時に役立つのが、書いたコードをブラウザ上で実行できる「オンライン実行環境サービス」です。 今回は、実行環境の手間を省いて「書いたコードをブラウザ上で実行できる無料サイト」を紹介します。 目次 ・複数言語対応系 ・ideone ・CodePad ・paiza.io ・repl.it ・Codecademy ・runnable ・Wandbox ・SourceLair ・JavaScript系 ・JSFiddle ・jsbin.com ・Codepen ・jsdo.it ・PHP系 ・PHPfiddle ・PHP Sandbox ・Write

Photo by Andy Lamb こんにちは。谷口です。 読書の秋ですが（既に冬並みに寒いですが……）、皆さんは最近何か本を読まれましたか？ ITエンジニアの皆さんは技術書を読まれることが多いかと思いますが、今回は弊社で私が特に凄腕だと思っているエンジニア達に読んで値段以上に価値があると感じた本を聞いてきましたので、ご紹介いたします。 ■弊社エンジニアが選ぶ役に立った本26選 佐藤です。paizaの開発や分析などを担当しています。 今回はエンジニアとして、考え方の面で影響を受けた本をピックアップしてみました。 ◆1.新C++言語入門 シニア編〈上〉基本機能 (C++言語実用マスターシリーズ) 新C++言語入門 シニア編〈上〉基本機能 (C++言語実用マスターシリーズ) 作者: 林晴比古出版社/メーカー: ソフトバンククリエイティブ発売日: 2001/05メディア: 単行本購入: 1人

Photo by Blake Patterson こんにちは。谷口です。 初心者がプログラミングの勉強を始めるにあたって、独学でどう勉強したらいいか分からないという方も多いと思います。また、プログラミング言語の本を読んでみたけど難しくて…という方や、環境構築が大変で挫折したという方もいるのではないでしょうか。 今回は、そういった初心者だけど楽しく勉強したい！という方のために、ゲーム感覚で楽しくプログラミング学習ができるサイトを紹介していきます。 現在paizaではプログラミング×異世界ファンタジーRPG『ロジックサマナー～閃光の召喚プログラマ』を公開しています！ 主人公はひょんなことから異世界に迷い込んだITエンジニア。異世界では、なんとプログラミングしたコードが召喚獣を呼び出すための詠唱魔法だった！？召喚魔法（※プログラミング）が使える主人公は急に世界を救う伝説の召喚士として盛大に歓迎さ

Photo by Daniel Cukier コーディング転職サイトpaizaを運営している関係上、「Webサービスを作りたいけど、プログラミング言語をどこから学んだらよいか？」という質問をよく受けることがあります。今回はプログラマ視点でプログラミングを学ぶときにつまずやすいポイントと、プログラミング言語の基礎を簡単に楽しく学べるサイトをまとめてみました。 最近はオンラインでプログラミングを勉強できるWebサービスが多数登場してきているので、以前よりプログラムを学ぶコストはぐっと下がっています！！ 目次 ・プログラミング言語を学ぶときに躓くポイント ・学ぶ言語を選ぶのに役立つサイト ・すぐ書きはじめられるプログラミング学習サイト ・講義型のプログラミング学習サイト ・少しコードに慣れてきてからお勧めのサイト ・さらにスキルアップするのに最適なサイト ・基礎文法をマスターしたいなら（おまけ）