paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

ブラウザだけで即Web開発!手軽なクラウド型開発環境サービス(クラウドIDE)5選


f:id:paiza:20140916135428p:plainこんにちは、谷口です。

皆さんはクラウドIDEなどのクラウド型開発環境サービスを使ったことがありますか?

通常、「Ruby on Railsを使ってWebサービスを作りたい」「LAMP環境での開発を試してみたい」といった場合には、言語の実行環境やデータベースの構築、サーバーの準備など、さまざまな環境設定が発生します。

特に初心者の場合

  • 環境構築に半日~1日ぐらいかかるなど、事前準備が長時間に及ぶ
  • 環境構築について理解できている人の手を借りる必要がある
  • 家と学校・職場など、PCが変わると同じ環境が使えない

といった問題でつまずいてしまうケースは少なくありません。

クラウド型開発環境サービスを使えば、そういった面倒な環境設定なしに、エディタ機能はもちろんコンパイラやデバッガなどもクラウドから使えるので、ブラウザだけで本格的な開発を手軽に始めることができます。

ブラウザさえあれば使えるので、OSやバージョンによって環境が左右されることもありません。また、GitHubと連携させてコードを実行することも可能です。

今回はこうした便利なクラウド型開発環境サービスを5つご紹介いたします。

■便利なクラウド型開発環境サービス

AWS Cloud9

f:id:paiza:20171204193120j:plain
Cloud9は、昨年Amazonに買収されて話題になったのでよく知っている方も多いかと思います。AWSのコンソール上で利用できる本格的なIDEです。

従量課金制で、英語にのみ対応しています。

CodeAnywhere

f:id:paiza:20171204193619j:plain
CodeAnywhereは、昨年同じクラウドIDEのCodebenderを買収しました。iOSAndroid用のアプリも公開されています。

月額課金制で、英語にのみ対応しています。

Codenvy

f:id:paiza:20171204194438j:plain
CodenvyはEclipse Cheがベースとなっています。昨年、Red Hatに買収されました。(クラウドIDEは買収が非常に多い業界です…)

Codenvyではコンテナが提供されるため、開発ができたらテスト環境を経てそのまま本番環境へつなげられるのが非常に便利です。

月額課金制で、こちらも英語のみの対応です。

Koding

f:id:paiza:20171204200317j:plain
Kodingは、遠隔でも複数人が同時に共同作業できるのが特徴です。

月額課金制(個人向けに無料期間もあります)で、こちらも英語のみの対応。

※なおKodingにはビルドやデバッグ、サーバーの起動などにはコマンドライン操作が必要で、厳密にはクラウドIDEとは異なる模様です。
blog.koding.com

PaizaCloud


PaizaCloudは、paizaが提供しているクラウド型開発環境サービスです。ブラウザを開くだけでエディタ、Webサーバ、DB等の開発環境が完了、OSの種類やバージョンなどに関係なくすぐに開発を進めることができるため、商用利用から初心者の学習・研修などにもおすすめです。

LAMPRuby on RailsJSPDjangoなどベーシックな環境が設定済みですが、それ以外のツールも追加インストールが可能です。またクラウド型開発環境サービスとしては珍しく、UIはもちろんエディタやターミナルなども完全日本語対応しています。

お試しで無料で使うこともでき、課金プランは月額でライトプラン・ベーシックプランがございます。PaizaCloudで開発したWebサービスは、ベーシックプランに移行すれば一般的なホスティングサーバと同様にそのままサービスの公開・運用ができます。

f:id:paiza:20171204201119j:plain


■まとめ

クラウド型開発環境サービスはブラウザさえあれば操作できるため、「これからWeb開発について学びたい」というプログラミング初心者にも最適です。

開発業務だけでなく、学習や研修にも便利ですので、ご興味の湧いた方はぜひ使ってみてください。


そして本日から公開となりましたPaizaCloudもよろしくお願いします!


ブラウザを開くだけで開発環境が整う PaizaCloud





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

120万枚超えの画像をJavaScriptから無料で使える「Pixabay API」で画像検索サイトを作ろう!

f:id:paiza:20171129141955j:plain
どうも、まさとらん(@0310lan)です!

今回は、完全フリーで利用できる画像共有サイト「Pixabay」が提供しているAPIを使って、簡単な画像検索サイトを作ってみたいと思います。

非常に扱いやすいAPIが用意されており、特にフレームワークなどを使わなくてもピュアなJavaScriptだけでシンプルに構築できるスグレモノです。

Pixabay API

f:id:paiza:20171129142054j:plain

■「Pixabay API」の使い方

それでは、まず最初に「Pixabay API」をどのように使えばいいのかを見ていきましょう!

サイトのトップページにある「Get Started」ボタンをクリックします。
f:id:paiza:20171129142121j:plain


すると、提供されているAPIのドキュメントが表示されるのですが、パラメータ部分に専用の「APIキー」が必要なことが分かります。

これは無料のユーザー登録をすれば誰でも取得できるので、そのまま「Sign up」のリンクをクリックしましょう!
f:id:paiza:20171129142137j:plain


好きな「ユーザー名」と「メルアド」「パスワード」だけですぐに登録可能です!
f:id:paiza:20171129142148j:plain


ユーザー登録を済ませれば、先ほどの箇所には専用の「APIキー」が表示されているはず!
f:id:paiza:20171129142213j:plain
この「APIキー」を使って、膨大なフリー画像をJavaScriptから制御することが出来るようになるわけです。(動画も扱えます…)


まずは、ここまでの作業を済ませれば準備は完了です!

早速「Pixabay API」の機能を試してみましょう。

■「JSON」データを取得しよう!

「Pixabay API」を使って画像を取得するのは簡単です。

次のURL(エンドポイント)にアクセスするだけで、JSONデータを取得することができます!

https://pixabay.com/api/?key=【APIキー】

「key=」のあとに続けて、先ほど取得した英数字の「APIキー」を記述します。


試しに、JavaScriptで「fetch()」を使い「JSONデータ」をコンソールログに表示してみましょう!

var url = 'https://pixabay.com/api/?key=6957465・・・・・';


fetch( url )
.then( function( data ) {


    return data.json();  //JSONデータとして取得


})
.then( function( json ) {


    console.log( json );


})

「fetch()」でJSONを取得する場合は、最初に「return data.json()」と記述する点に注意しましょう。


JavaScriptを実行すると、コンソールログにズラッと画像データが取得できているのが分かりますね!
f:id:paiza:20171129142315j:plain
上記の場合、「hits」という配列に20枚の画像データが格納されていることになります。


それぞれの画像データには、さまざまななプロパティが設定されています。
f:id:paiza:20171129142328j:plain
画像サイズ、ダウンロードページのURL、プレビュー用の画像URL、画像に関連するタグ…など、これらのデータを活用することで多彩なWebアプリが作れるわけです。

そこで、「Pixabay API」を使った簡単な「画像検索サイト」を作ってみたいと思います!

■「画像検索サイト」を作ろう!

基本的な画像データの取得方法が分かったところで、早速サンプルデモを作ってみましょう。


検索したい「キーワード」を入力すると、関連する画像が一覧で表示されるというシンプルなデモです。
f:id:paiza:20171129142349j:plain
好きな画像をクリックすると、Pixabayのダウンロードページに遷移するという機能も付けてみましょう。


そこで、まずはサイトの骨組みとなるHTMLを次のように作ります!

<form name="search">
  <input name="key" type="text" placeholder="文字を入力してください">


  <input name="btn" type="submit" value="ボタン">
</form>




<!-- ここに画像の一覧を表示する -->
<div id="result"></div>

キーワード入力用のボックスとボタン要素だけの単純なフォームを配置しています。

「pixabay API」で取得した画像の一覧は、div要素内に並べることにしましょう。


次に、JavaScriptで検索サイトの中身をプログラムしていきます!

まずは、キーワードを入力してボタンをクリックするか「エンターキー」を叩くことで、画像を取得する処理を組み立てます。

//ボタンをクリック、またはエンターキーが押されたら
document.search.btn.addEventListener('click', function(e) {
    e.preventDefault();  //画面の更新をキャンセル
  


    //JSONデータの取得処理( fetch() )


})

フォーム要素のname属性を使ってボタンのイベント処理を作っています。

ボタンをクリックすると画面が更新されて画像が表示されなくなるので、「preventDefault()」でキャンセルしておきましょう。

あとは、先ほど試した「fetch()」を使って画像のJSONデータを取得すればOKです!


ただし、今回は入力されたキーワードに関連する画像を取得するのと、取得した画像を画面に表示する処理が必要です。

そこで、分かりやすいように「createURL()」「createImage()」という2つの関数を作成しておきましょう。

fetch( createURL(document.search.key.value) )
.then( function( data ) {
    return data.json();
})
.then( function( json ) {


    createImage( json );    


})

「createURL()」の引数に、入力されたキーワードを指定するようにしています。

また、最終的に取得できたJSONデータは「createImage()」の引数に指定しました。

あとは、この2つの関数を作成すれば「画像検索サイト」はほぼ完成です!

■画像のJSONデータを表示しよう!

まず最初に、入力されたキーワードを使ってURLを生成する関数「createURL()」を作りましょう。
と言っても内容はシンプルで、APIキーやキーワードなどを組み合わせたURLを返すだけの処理です。

function createURL( value ) {


  var API_KEY = '6957465・・・・・';
  var baseUrl = 'https://pixabay.com/api/?key=' + API_KEY;
  var keyword = '&q=' + encodeURIComponent( value );
  var option = '&orientation=horizontal&per_page=40';


  var URL = baseUrl + keyword + option;
  
  return URL;


}

キーワードは念のためエンコードしたものをURLに追加しておきましょう。


「option」ですが、「Pixabay API」には便利な設定が用意されており、次のようなオプションを付けられます。

(例)

  • orientation:画像の水平/垂直方向を均一に揃えられる
  • per_page:1回に取得できる画像データの数を変更できる
  • page:多数の画像を取得した場合のページ数を指定できる
  • image_type:写真・イラスト・ベクターなどの形式を指定できる
  • category:画像の区分(カテゴリ)を指定できる

etc...

これらのオプションもURLに付与することで、好みの画像を簡単に抽出できるので便利です。


次に、作成したURLを使って取得したJSONデータから、画像を画面に一覧表示する関数「createImage()」を作りましょう。

function createImage( json ) {
  var result = document.getElementById('result');


  if( json.totalHits > 0 ) {
      
      //JSONデータから画像を表示する処理
      
  }
  else {
    alert('該当する写真がありません');
  }
}

JSON内のプロパティに「totalHits」という項目があるのですが、これは検索して該当した画像の枚数が数値で格納されています。

つまり、「0」だと1枚も該当しなかったということになります。

そこで、IF文を使い該当する画像があった場合のみ一覧表示する処理にしています。


画像を表示する処理ですが、データが配列なので「forEach()」を使って1つずつimgタグを生成し表示させていきます。

json.hits.forEach( function( value ) {


    var img = document.createElement('img');
    var a = document.createElement('a');


    a.href = value.pageURL;  //ダウンロード用のURL
    a.target = '_blank';
    img.src = value.previewURL;  //プレビュー用のURL


    a.appendChild( img );
    result.appendChild( a );  //divタグ内に画像を配置


})

「imgタグ」「aタグ」をそれぞれ作成し、以下のURLを代入していきます。

  • 「pageURL」:画像ダウンロード用のURLで「aタグ」に使用
  • 「previewURL」:画像の一覧表示に使うプレビュー画像のURLで「imgタグ」に使用

これにより、プレビュー用のサムネイル画像が一覧表示に使われて、画像をクリックするとダウンロード用のページに遷移できるようになります。

ここまでプログラムできれば、あとはCSSでスタイルを調整すれば完成です!


実際に実行すると、次のように画像を検索できるようになります。

応用例として、オプションの設定ができるUIを作成したり、複数ページに渡る一覧ページを作成するとさらに利便性が高まるでしょう。


今回、作成したサンプルデモの全ソースコードは以下のリンクから閲覧できますので、ぜひ参考にしてみてください!

【 Pixabay APIを使った画像検索サイトのソースコード|GitHub 】

JavaScript講座は完全無料!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているJavaScriptが学べる入門講座をはじめに、PythonJavaC言語PHPRubySQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

特に、今まで有料だった「JavaScript入門編」・「ゲームエンジニア入門編」は先月から【全編無料】となりました!

また、ただいま「Rails入門編」・「ポートフォリオ制作」の有料レッスンを期間限定・連続無料公開いたします。ぜひごらんください!

詳しくは下のリンクからサイトをご確認ください。
paizaラーニング

■まとめ

今回は、「Pixabay API」の基本的な機能を駆け足でご紹介しました!

このAPIを活用すれば、さまざまなWebアプリやサービスへ簡単に組み込めるので活用範囲はかなり広いと思います。

また、ピュアなJavaScriptだけで構築しましたが、もちろんフレームワークなどを使えばもっと簡単にWebアプリを作成できるでしょう。

ぜひ、みなさんもオリジナルの画像検索アプリに挑戦してみてください!


<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

プログラミングAIカードゲーム『一攫千金プログラミング~ボットdeジャックポット~』公開!


paizaでは、プログラミングカードゲーム『一攫千金プログラミング~ボットdeジャックポット~』を本日から公開いたしました。

『一攫千金プログラミング~ボットdeジャックポット~』とは


『一攫千金プログラミング~ボットdeジャックポット~』は、プレイヤーのあなたがギャンブルAI(人工知能)のプログラムを作り、ハイスコアを目指すプログラミングカードゲームです。プログラミング言語JavaRubyPython、C、C++C#PHPなどなど24言語に対応しています。

カジノでおなじみのブラックジャックゲームで、さまざまなAIディーラーたちと自分のコードを対戦させて、勝利すれば手持ちのチップが増えていきます。

最強のAIを作りあげ、ランキング上位を目指しましょう!

プログラミングが得意な方はもちろん、プログラミング初心者の方でも、サンプルコードを参考にしながら気軽に楽しめるゲームとなっています。paizaラーニングの学習動画もギャンブルAIを作る参考になりますので、プログラミング初学者や初心者の方は合わせて取り組んでみてください。

paizaラーニング

ランキング上位を目指すには繰り返しコードの改良をしていく必要があり、ゲームを進めることでプログラミングの勉強ができます!



Amazonギフト券がもらえる「JACKPOTキャンペーン」開催!


『一攫千金プログラミング~ボットdeジャックポット~』のリリースを記念して、毎週月曜日にAmazonギフト券が当たるキャンペーンを実施します。

期間内にディーラー別のランキングで指定された当選順位(毎週変わります!)を獲得された方に、Amazonギフト券1000円分をプレゼントいたします。

※実施期間:2017年11月28日(火)~2018年1月22日(月)

『一攫千金プログラミング~ボットdeジャックポット~』の遊び方

ブラックジャックで美少女ディーラーと勝負!


勝負はブラックジャックでおこないます。数値を21に近づけるコードを書きましょう。ゲームをやり込むほど、新たなディーラーが開放されていきます。ディーラーごとに特殊ルールが設定されているので、それぞれに合ったプログラムを作ってください。

◆書いたコードが自動で利益を生み出す!?


プレイ状況に応じて、公開される入力値や連続勝負回数も増えていきます。最適なコードを書いて、より効率的に稼げるプログラムを作成してみましょう。

◆みんなのコードを見ながらプログラムを改良しよう!


ランキングページでは、ゲーム内通貨を使って他のユーザーたちが書いたコードを購入することもできます。上位ユーザーのコードも参考にしながら、自分のコードを改良して上位進出を目指しましょう。

◆ランキング上位に入賞するとジャックポットのチャンス!


毎週月曜0時時点でのディーラー別ランキングで指定順位に入賞していると、ジャックポットとなり特別ボーナスが付与されます。コードを提出するだけで、毎週一攫千金のチャンス! さらに上記キャンペーン期間中は、ボーナスとともにAmazonギフト券ももらえちゃいます!




paiza転職は、転職時のミスマッチをなくし、エンジニアがより技術面にフォーカスしたやりがいある仕事を探せる転職サービスです。プログラミングスキルチェック(コーディングのテスト)を受けて、スコアが一定基準を超えれば、書類選考なしで複数の会社へ応募ができます。

詳しくはこちら
paiza転職


まずはスキルチェックだけ、という使い方もできます。すぐには転職を考えていない方でも、自分のプログラミングスキルを客観的に知ることができますので、興味がある方はぜひ一度ご覧ください。

詳しくはこちら
paizaのスキルチェック