paiza開発日誌

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

無償のデータベースと連携可能!Webサイトもブログも作り放題な「AppDrag」を使ってみた

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

今回は、初心者の方でも簡単にWebサイトやブログなどを作成して公開まで可能な無料のWebサービスをご紹介します!

また、簡単にデータベースを構築したり独自のAPIを作成したりすることも可能で、使い方次第では簡単なWebアプリまで作れるポテンシャルを秘めているのが特徴です。

非常に多機能なサービスということもあり、初心者の方から上級者まで幅広く楽しめるのでぜひ参考にしてみてください!

AppDrag

f:id:paiza:20180109095325j:plain

■「AppDrag」の使い方

それではまず最初に、「AppDrag」がどのようなサービスなのかを実際に使いながら見ていきましょう!

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


無料のユーザー登録を行う画面になるので、必要事項を入力していきましょう。
f:id:paiza:20180109095357j:plain
ユーザー名、メルアド、パスワードだけで誰でも簡単に登録できるので便利です。


次に、自分がこれから作ろうと考えているWebサイトに最適なテンプレートを選択します。
f:id:paiza:20180109095411j:plain
イベント系・ビジネス系・サービス系・LP・ポートフォリオ…など、10種類以上のカテゴリから多数のテンプレートを選ぶことができます。


テンプレートが決まったら、任意の「プロジェクト名」を入力しておきましょう。
f:id:paiza:20180109095425j:plain


すると、ブラウザ上でテンプレートをベースにした「Webエディタ」が起動します!
f:id:paiza:20180109095438j:plain
あとは、この画面上からマウス操作でWebサイトを細かく編集していくという流れになります。


このようなサービスは他にもいくつかありますが、「AppDrag」のすごいところはそのカスタマイズ性。他サービスと比べて圧倒的に強力です。

今回も最初にテンプレートを選択してはいますが、使い方次第ではじめとはまったく違うWebサイトに変えてしまうことも可能なので、それも面白さの1つといえるでしょう。

■「Webエディタ」でサイトを編集しよう!

ここからは、「AppDrag」のWebエディタを使ってどのような編集ができるのかを簡単に見ていきましょう!

基本的な作業としては、テンプレートの編集したい部分をクリックすることでテキストを変えたりスタイルを変更していくことになります。
f:id:paiza:20180109095500j:plain
もちろん、コンテンツの位置やサイズなど基本的な編集も同様にできます。


画像については、専用のウィジェットが用意されており無料で高解像度の画像を使うことができて便利です。
f:id:paiza:20180109095514j:plain
PixaBay・Unsplash・Giphy…など、外部サービスの無料画像を簡単に検索できます。(自分が用意した画像もアップロード可能です)

これらの画像は、背景画像として使うだけでなく、ギャラリーやスライドショーなど、さまざまなコンテンツにも流用可能です。


Webコンテンツを追加したい場合は、「追加」ボタンをクリックしましょう!
f:id:paiza:20180109095529j:plain


テキスト、画像、ヘッダー、フッター、スライドショー・ギャラリーなど、多彩なコンテンツを選択することが可能です。
f:id:paiza:20180109095541j:plain
あとは、ドラッグ&ドロップするだけで簡単に追加することができるので便利です。


また、各コンテンツはスタイルの調整など細かくデザインを編集することも可能です。
f:id:paiza:20180109095552j:plain


Webサイトの機能を拡張できる「プラグイン」もいくつか用意されています。
f:id:paiza:20180109095617j:plain


例えば、「カウントダウン」を選択して好みのデザインを選んだら、そのままサイトへドラッグ&ドロップします。
f:id:paiza:20180109095631j:plain


すると、簡単にWebサイトへオシャレな「カウントダウンタイマー」が追加されるわけです!
f:id:paiza:20180109095644j:plain
他にも、コンテンツを「タブ化」したり、3DCGを使ったパーティクルを埋め込んだり、チャートや課金機能なども簡単に組み込めます。


Webサイトをグローバルに対応したい場合は、簡単に「多言語化」できる機能も用意されています。
f:id:paiza:20180109095657j:plain
言語を指定するだけで、Webサイトのテキスト部分を自動的に抽出してくれるので、そのテキストに合わせた訳語を入力していくだけで完成します。

あとは、コンテンツの追加から「翻訳ボタン」を設置すれば、複数言語に対応したWebサイトに早変わりします!


また、通常のページだけでなく「404 Not Found」ページなども同じように編集が可能です!
f:id:paiza:20180109095710j:plain


さらに、専用の「ブログエディタ」まで搭載しているので、ブログサイトを構築することも簡単なのです!
f:id:paiza:20180109095722j:plain
ブログ記事の管理から公開・非公開設定、下書き状態の管理、カテゴリ・タグの管理…など、一般的なブログに必要な要素は最低限まとまっています。


このブログコンテンツは、通常のWebサイトに埋め込んで使うことも可能で、幅広い使い方ができるのも魅力的でしょう。

■Webサイトを公開しよう!

ある程度、Webサイトの編集が完了したらプレビュー表示をしてみましょう!
f:id:paiza:20180109095745j:plain
PC・タブレットスマホなど、複数のデバイスでどのように表示されるかを事前に確認することができます。


問題なければ画面右上にある「書き出し」ボタンをクリックします。
f:id:paiza:20180109095759j:plain


画面下の緑色のボタンをクリックしましょう!
f:id:paiza:20180109095812j:plain


すると、たったこれだけでWebサイトが世界中に公開されます!
f:id:paiza:20180109095827j:plain
URLが表示されているので、クリックすれば先ほど作成したWebサイトを確認することができます。

また、SNSやメールなどでURLをシェアすれば、友人・知人など誰でも閲覧することが出来るわけです。


Webサイトを公開したら、Googleアナリティクスを設定することもできます!
f:id:paiza:20180109095839j:plain
「AppDrag」にもアナリティクス機能がありますが、詳細なデータが欲しい人はGoogleアナリティクスのほうがいいでしょう。


さらに驚くべきことに、作成したWebサイトはダッシュボードからソースコードを編集することが可能です!
f:id:paiza:20180109095850j:plain
専用の「ファイルエクスプローラ」とサジェスト機能付きの「コードエディタ」が搭載されているので、ブラウザ上から自由にコードを編集してWebサイトをカスタマイズできるわけです。

プログラミングが出来る方であれば、この機能だけでもWebサイトを自由に作成できるのでかなり強力な機能だと思います。
ソースコードの書き出しも可能です)

■バックエンド機能を使ってみよう!

「AppDrag」の特徴的な機能として、データベースやAPIの構築を自由に行える「Cloud Backend」というサービスが提供されています。

ダッシュボード画面から利用できるようになっており、Webサイトと連携することでさまざまな開発に活用することが可能です。


使い方としては、画面上部のメニューから「Cloud Backend」を選択することで専用のエディタ画面が表示されます!
f:id:paiza:20180109095911j:plain
あとは、データベースに任意のデータを作成してからAPIを構築することで、プログラムからデータを自由に読み書きできるようになります。


データはゼロから作成することも可能ですが、Excelスプレッドシートなどで作成したテーブルをCSVに変換することでも代用可能です。

試しに、スプレッドシートで以下のように簡単なユーザーデータを作ってみました!
f:id:paiza:20180109095930j:plain
「name」「tel」「address」という3種類だけのデータを各ユーザーごとに用意しています。(これをCSVに変換しておきましょう…)


次に、データベースを新規作成して、先ほどのデータに合わせるように「name」「tel」「address」という項目を追加しておきます。
f:id:paiza:20180109095943j:plain


メニューから「インポート」を選択して、CSVファイルを読み込みましょう!
f:id:paiza:20180109095955j:plain


すると、こんな感じでデータが取り込まれます。
f:id:paiza:20180109100008j:plain


あとは、独自APIを作成してプログラム上からデータベースの情報を取得できるようにします。

そこで、「新機能」をクリックして新規にAPIを作成します。
f:id:paiza:20180109100019j:plain
(ちなみに、あとで必要になるAPIキーもココで確認できます)


適当なAPI名を入力して、「タイプ」はSELECTにしておきましょう。
f:id:paiza:20180109100034j:plain


これだけで、ユーザー情報を取得するAPIが完成します!
f:id:paiza:20180109100055j:plain
設定の確認ポイントとしては…

  • 「① Documentation」にチェックが入っているかを確認
  • 「② Response type」をJSONに設定
  • 「③ Table name」を先ほど作成したデータベース名に設定

上記の内容を確認してから「保存」をしておきましょう!


そして、「Open documentation」の項目をクリックします。
f:id:paiza:20180109100122j:plain

すると、自動的にAPIドキュメントが作成されています!
f:id:paiza:20180109100140j:plain
jQuerycURL・Node.js・C#PHPPythonRuby・Goなどの言語から、作成したAPIを使うプログラム例も一緒に掲載されているのが分かります。


試しに、jQueryからAPIを使ってデータを取得するとこんな感じ。
f:id:paiza:20180109100201j:plain
ちゃんと取得できましたね!

このように、「AppDrag」のバックエンド機能を活用すれば、データベースを使ったWebアプリも簡単に実現することが可能です。

単純なWebサイトを作成するのもいいですが、さまざまなデータを活用したWebアプリを開発するのもきっと楽しいでしょう!

PythonJavaScriptなどの講座が完全無料!動画でプログラミングが学べるレッスン


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

AppDragのようなサービスを使いつつ、プログラミングをしてWebサイトの作成・編集ができるようになりたい方、SQLを書いてデータベースを操作できるようになりたい方にもおすすめです。

JavaScriptSQL、HTML/CSSPythonJavaC言語PHPRubyなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

また、今まで有料だった「Python入門編」・「ITエンジニアの就活準備編」(※就活生じゃなくても受講できて転職活動にも役立ちます!)が、本日から【全編無料】となりましたのでぜひごらんください!

詳しくはこちら
paizaラーニング

■まとめ

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

非常に多機能なサービスではあるものの、使い方としては簡単に扱えるような設計になっているので初心者の方でもすぐに使えるようになるはずです。

また、作成したWebサイトはすべてプログラミング可能で、データベースとの連携もできるので上級者も楽しんで長く使い続けられるサービスといえるでしょう。

ぜひ、みなさんもオリジナルのWebサイトやアプリを開発&公開してみてはいかがでしょうか!


<参考>





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

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

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

paizaのスキルチェック

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

完全無料!動画で実践的なWebプログラミングを学べる海外YouTube厳選まとめ

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

今回は、実践的なWeb開発をじっくり動画を見ながら学習することができる良質な海外YouTubeチュートリアルコースを厳選してご紹介します!

主に、JavaScriptをメインにしたNode.jsやReact / React Nativeなどを徹底的に学べるコースを選んでいますが、最近のトレンドに沿ったWebサイトのデザイン&開発手法についても一通り学べるようになっています。

動画を見ながら、どのようにコードが構築されていくのかを観察しながら自分なりのプログラミング手法を見つけていくのも楽しいと思います。

■Webサイトのデザインからプログラミングまで学ぶ!

【 12 in 12 Design to Code Challenge 】

f:id:paiza:20171227121116j:plain
レスポンシブなWebサイトや「ランディングページ」「ポートフォリオ」など、全12回の動画でさまざまなWebサイトのデザインやプログラミング手法を学習できるコースです。

いずれもシンプルなWebサイトでありつつ最近のトレンドも詰め込まれているのが特徴で、動画を見ながらいろんなスタイルのWebサイトを作れるので、きっと楽しくなるはずです!


動画では、まず最初に「Photoshop」などのデザイン系ツールを使ってWebサイトのモックアップを作ることから始めます。

f:id:paiza:20171227121135j:plain

他のツールを使っている方でも参考になる点は多く、どのような手順でデザインしていくのかを学ぶことができます。


デザインが完了したら、次はHTML / CSS / JavaScriptによるプログラミングの開始です!
f:id:paiza:20171227121200j:plain
特別なライブラリや環境を使うわけではないので、純粋なWebプログラミングを学びたい方にもオススメの内容です。

作成したモックアップを流用する方法や、レスポンシブな設計手法とか効果的なCSSスタイルの記述方法などは必見。


この動画コースを完了すれば以下のようなWebサイトが作れるようになります!

  • レスポンシブなWebサイト
  • ランディングページ
  • 映像系のWebサイト
  • 求人用の掲示板サイト
  • ポートフォリオサイト
  • ショップサイト

etc...

HTML / CSSの基本的なプログラミングができるようになった人の次へのステップとしても重宝するコースです!


<参考>

■Node.jsを使ったサーバーサイドをじっくり学ぶ!

【 REST API Tutorial 】

f:id:paiza:20171227121310j:plain
こちらは、Node.js / Express / MongoDBを活用したサーバー側のプログラミング手法を、全17回の動画でゼロから丁寧に学習することができるコースになります。

一般的なWebサービスには欠かせないRESTによる設計モデルの知識や、データベースの読み書きなどを実際にコードを触りながら学習できるように構成されているのが特徴です!


動画の前半では「REST APIとは?」から始まる事前知識を図解で解説しており、Node.jsやMongoDBなどのインストール手順も詳しく教えてくれます。
f:id:paiza:20171227121359j:plain
基本的なPOST / GETによるデータの読み書きや、ルーティング手法、JSONの扱い方など基本的な知識は一通りマスターできるように構成されています。


また、動画の後半ではExpressやReactなどを使って簡単なWebアプリを開発していきます!
f:id:paiza:20171227121414j:plain
前半で学習した基本的な知識をフル活用して組み立てていくので、それまでの学習成果を再確認することもできるでしょう。

また、途中にPostmanを使ったAPIのテスト手法についても触れられているのが特徴で、便利なサービスを活用することで効率化を図っています。こちらも一見の価値あり。


この動画コースを完了すると、以下のような知識が身につきます!

  • REST APIについて
  • Node、Express、MongoDBのインストール手順&使い方
  • GET / POST / PUT / DELETEの使い方
  • POST GETを使ったデータの読み書き
  • ルーティング手法
  • JSONの扱い方
  • Expressによる簡単なWebアプリの作り方
  • エラーハンドリング
  • Postmanを使ったAPIテストの手法
  • MongoDBと連携したデータベースのハンドリング
  • Reactによる簡単なWebアプリの作り方

etc...

この動画コースを理解するだけで、簡単なWebサービスなら個人で開発できるスキルが身につきます!


<参考>

■「React & Redux」によるWeb開発を徹底的に学ぶ!

【 React JS Tutorials 】

f:id:paiza:20171227121530j:plain
こちらはReactの基本的なチュートリアルを試したい人にオススメの動画となっており、ReactによるWeb開発を全23回の動画で基礎からしっかりと学べるコースになっています。


簡単なWebサイトを作りながら、Reactコンポーネントの仕組みや構造について実際に手を動かしながら1つずつ丁寧に学べる構成になっているのが特徴です。
f:id:paiza:20171227121547j:plain
実際のWeb開発でも役立つコンポーネントの効果的な再利用法や、ルーティング手法、非同期操作によるデータ処理、メモリリークの解決法、Fluxパターンによるアプリ設計なども図解入りで詳しく学べます。

また、動画後半ではReduxフレームワークによるSPAの開発手法についてもしっかりと学習できるようになっており、「Actions → Reducers → Store」の仕組みを持ったスケーラビリティの高いWebアプリ開発手法が身につきますよ!


<参考>

■「React Native」によるスマホアプリ開発手法を学ぶ!

【 React Native Tutorial 】

f:id:paiza:20171227121628j:plain
「React Native」を使ってiOS / Android用のスマホアプリの開発手法を学習できるように、サンプルのデモアプリを1つ作りながら全37回の動画で基礎からしっかりと学習できるコースです。

サンプルと言ってもしっかりと作り込まれた「オークション」アプリになっており、リアルタイムに入札などを行う仕組みも実装されているので非常に参考になります。


便利なツールの活用法も紹介されていて、例えば画面UIに関しては「NativeBase」を上手く利用しています。
f:id:paiza:20171227121701j:plain
単純な記述でiOS / Androidに対応したネイティブに近いデザインの描画が可能なので、短時間で見た目の良いアプリを作るには最適だと感じました。


さらに「Feathers」というサービスを組み込むことで、リアルタイムにデータのやり取りをおこなえるようにプログラミングしていくので、「オークション」の性質にはピッタリのツールと言えるでしょう。


また、動画の前半ではオークションの仕組みを構築し、そのあとは1つずつ機能を追加していくカタチで進んでいくので見ているだけでも楽しいです!
f:id:paiza:20171227121725j:plain
最初はシンプルなアプリが、「ログイン機能」「お気に入りボタン」「タブバー」「アニメーション」…など、どんどん高機能になっていくのを楽しみながら勉強できるのがポイントだと思います。


<参考>

■「Twitter」を作りながらWebサービスの開発手法を学ぶ!

【 Build a Twitter Clone 】

f:id:paiza:20171227121816j:plain
Twitterのように「ツイート」「リツイート」「お気に入り」などができる簡単なSNSアプリをゼロから開発し、全26回の動画でWebサービスの仕組みを学習できるコースです。


Node.js + Express.js + MongoDB(Mongoose)の組み合わせでベースとなる環境を整えるところから始まり、「ツイート」などの機能を1つずつ実装していく過程をすべて体験していくことができます。
f:id:paiza:20171227121834j:plain
また、GraphQLによるAPIの取り扱いを簡単にする「Apollo」のサービスを活用した手法も学習することができるのも特徴的でしょう。

Twitterのようにリアルタイム更新する方法やログイン機能など、Webサービスに必要な機能はだいたい学べる貴重なコースになっています。


ちなみに「Twitter」ではなく、人気の配車サービス「Uber」と同じような機能を持ったサービスの開発コースもあります!

【 Car/Taxi Booking App 】

f:id:paiza:20171227122719j:plain
全13回の動画で、マップと位置情報を使ってユーザーとマッチングさせる機能をゼロから作り込んでいく楽しいコースになっているので、ご興味ある方はぜひ参考にしてみてください!


<参考>

■おまけ

最後に、JavaScript初級者向けに基本から応用技までを学習できるように、小さなWebアプリを作りながら学べるコースをご紹介しておきます!

【 JavaScript30 】

f:id:paiza:20171227122819j:plain

全30回の動画コースになっており、1回の動画につき1つのWebアプリを作っていきます。


作成するWebアプリは以下のような感じです!

  • ドラムキット
  • アナログ時計
  • イメージギャラリー
  • 検索ボックス
  • タスク管理
  • スケッチアプリ
  • HTML5動画プレイヤー
  • スピーチシンセ

これらのミニアプリをゼロから開発していくことで、JavaScriptの基本的な使い方はもちろんですが、AjaxREST API・Web Audio API音声認識・ゲームプログラミング…など、幅広い知識も一緒に習得することが可能です。

その他、JavaScriptフレームワークやNode.jsなどに関する基本的なチュートリアルコースも以下の記事で詳しく解説していますので、ぜひ参考にしてみてください!
paiza.hatenablog.com


<参考>

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


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

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

特に、今まで有料だった「JavaScript入門編」・「ゲームエンジニア入門編」は、【全編無料】となりましたので、ぜひごらんください!

■まとめ

今回は、実践的なWeb開発を学べる動画ばかりを厳選してご紹介してみました。

ある程度、基本的なプログラミングを覚えたあとに次は何をしようかな?…と悩んだ時に、今回ご紹介したような動画を見ると非常に効果的だと思います。

いずれの動画も基礎知識をしっかりと学べるような構成になっているので、動画を見終わってから自分なりのオリジナルサービスを開発していくきっかけにもなるはず!

ぜひ、みなさんもお気に入りのコースを視聴して、楽しいWeb開発を始めてみましょう!





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

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

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

paizaのスキルチェック

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza

機械学習にも便利!PythonライブラリやJupyter Notebookが今すぐ使えるクラウドIDE

f:id:paiza:20171227154920p:plain
(English article is here)

f:id:paiza:20151217152725j:plainこんにちは、吉岡(@)です。

Pythonは、CSVなどのデータ処理、Webサービスの開発、スクレイピング、ボット作成など幅広い目的で使われているプログラミング言語です。特に最近は、機械学習・AIのなどの開発に適したライブラリが充実していることもあって注目が高まっていますよね。

ただ、Pythonを単体でインストールしても、表やグラフを作ったり、データなどを整理したりする機能はありません。

そこで、Jupyter Notebookというツールがあります。

Jupyter Notebookを使うと、ブラウザ上で簡単にプログラムを実行できるうえ、表やグラフなども表示できます。

また、Markdownなどで文章も書けるため、プログラムと文章をわかりやすくまとめることができます。このまとめたノートは簡単に他の人と共有もできます。

Jupyter Notebookさえあれば、ひとまず初心者がPythonプログラミングを始めるのに必要な環境は、ほぼ用意できると言っても過言ではありません。

ただ、Jupyter Notebookを使うには、Pythonやモジュールのインストールや設定なども必要になります。PCの環境は人によって違うため、この環境構築の段階で、OS・バージョン・他のソフトなどの影響を受けてエラーがでたり、今ある環境を壊してしまうこともあります。

また、家と学校・会社など、PCが複数ある場合はそれぞれで設定が必要ですし、そのままではデータを共有することもできません。

そこで、今回はPaizaCloudを利用します。

PaizaCloudは、クラウド上で動く開発環境です。面倒なインストールや環境設定をすることなく、Web開発やアプリケーション開発を簡単・手軽に始められます。

PaizaCloudでは、Python実行環境に加えてJupyter Notebookもあらかじめ用意されていますので、いつでもどこでも、すぐにPythonプログラミングができます。

また、機械学習でよく使われるNumpy, Scipy, Pandasといったライブラリもあらかじめインストールされており、Djangoを使ったWeb開発も行えます。

さらに、手軽にLinuxの操作ができるように、ブラウザ上で動作するファイル管理、テキストファイル編集、ターミナル、ブラウザ(ブラウザの中で動くブラウザ)なども用意されているので、Pythonを他のツールやファイルと組み合わせて自由自在に使うことができます。

PaizaCloudは、インストールなどが不要でクラウド上で動かせるので、端末が変わっても簡単に動かせます。WindowsMacなどで作った内容を、iPadなどのタブレットで確認するといったこともできてしまいます。

Jupyter Notebookも、PaizaCloudも、ブラウザ上で手軽にプログラミングできるツールですので、組み合わせるとPython開発に最適な環境が簡単にできます。

今回は、実際にJupyter NotebookとPaizaCloudを使って、Pythonでプログラミングしてみましょう。

PaizaCloud Cloud IDEを使う

それでは、始めていきましょう。まずは、PaizaCloudにログインします。

PaizaCloud Cloud IDEのサイトはこちらです。

https://paiza.cloud/

メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。

サーバを作る

ログインできたら、サーバを作ります。

「新規サーバ作成」ボタンを押して、サーバ作成画面を開きます。

f:id:paiza:20171213234155p:plain

「Jupyter Notebook」を選択して、「新規サーバ作成」ボタンを押します。

f:id:paiza:20171227135936p:plain

サーバが立ち上がり、Jupyter Notebookの環境も用意されています。

f:id:paiza:20171227140547p:plain

3秒程度で、Jupyter Notebookを使った開発環境がブラウザ上にできあがりました!

Jupyter Notebookの起動

サーバ作成時に"Jupyter Notebook"を指定しているので、すでにJupyter Notebookが立ち上がっています。

f:id:paiza:20171227140611p:plain

指定し忘れた場合や後から起動させたくなった場合も、簡単に起動できます。

まず、画面左側の「ターミナル」アイコンを選んでクリックします。

f:id:paiza:20171213234317p:plain

ターミナルが立ち上がります。Jupyter Notebookは"jupyter notebook"というコマンドで起動できますので、コマンドを入力します。

$ jupyter notebook

f:id:paiza:20171227140023p:plain

サーバが起動して、ブラウザが自動的に立ち上がりました。

画面の左側には、"8888"と書かれたボタンが追加され、Jupyter Notebookが8888番ポートで動いていることがわかります。

このボタンをクリックしてもブラウザ(PaizaCloudの中で動くブラウザ)を起動することができます。

f:id:paiza:20171227140319p:plain

Jupyter Notebookを使ってみる。

Jupyter Notebookでは、「ノートブック」という単位でプログラムを管理しています。(実際にはipynbという拡張子のファイルになります)

ノートブックを作ってみましょう。Newボタンをクリックして、表示されるメニューから"Python"を選びます。

f:id:paiza:20171227140418p:plain

ノートブックが作成され、新しいブラウザが開きました!

f:id:paiza:20171227140737p:plain

"In [ ]: "というラベルの右側にテキスト入力欄がありますね。ここにプログラムを入力していきます。

まずは、文字を表示してみましょう。"Hello " + "Paiza"と入れてみます。入力できたら、「Run」ボタンを押すか、シフトキーを押しながらエンターキーを押してコードを実行します。

'Hello ' + 'Paiza'

"Hello Paiza"と、文字列を結合した結果が表示されました!

f:id:paiza:20171227140822p:plain

計算もしてみましょう。

2**10
2**100

ちゃんと計算できましたね!

f:id:paiza:20171227140920p:plain

グラフを表示

今度はグラフを表示してみましょう。PaizaCloudではグラフ表示に必要なmatplotlibや、データ処理に必要なNumpyもインストールされていますので、すぐに利用できます。

まずはsin関数を表示してみましょう。

Jupyter Notebook上でグラフや図を表示するには、最初に「%matplotlib inline」と入れて、matplotlibでの図のインライン表示を有効にします。

NumPyを利用して、sin関数のデータを作成し、"plot"関数で表示してみます。

%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 10, 100)
y  = np.sin(x)
plt.plot(x, y)

sin関数のグラフが表示されました!

f:id:paiza:20171227141055p:plain

棒グラフも表示してみましょう。乱数で正規分布を作ってみます。randnで10000個の乱数を生成し、histで棒グラフを表示します。bins=100では棒の数を指定します。

%matplotlib inline
from numpy.random import *
import matplotlib.pyplot as plt

R = randn(10000)
plt.hist(R, bins=100)
plt.show()

f:id:paiza:20171227141410p:plain

正規表現っぽいグラフが表示されましたね。

乱数の数や、棒の数を変えて見てもいい感じですね。

画像を表示

画像を作成して表示することもできます。

画像の表示には、"imgshow"関数を使いますので、試してみましょう。

%matplotlib inline
import pylab as plt
import numpy as np


Z=np.array(((1,2,3,4,5),(4,5,6,7,8),(7,8,9,10,11)))
im = plt.imshow(Z, cmap='hot')
plt.colorbar(im, orientation='horizontal')
plt.show()

(Ref :python - How can I display a np.array with pylab.imshow() - Stack Overflow)

ちゃんと表示されましたね。

f:id:paiza:20171227141540p:plain

円周率の計算を図で表示

今度は、PaizaCloud上のJupyter Notebookで、モンテカルロ法を使って、円周率を求めます。

モンテカルロ法というのは、ランダムに点を書いて、円の中に何個点が入っているかを数える方法です。(モンテカルロ法 - Wikipedia

ここでは、1000個の点を作成して、円の中の点の数を数えます。点の様子は図で表示してみます。

%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt

SAMPLES=1000

xs = np.random.rand(SAMPLES)
ys = np.random.rand(SAMPLES)

inner = 0
for i in range(SAMPLES):
    x = xs[i]
    y = ys[i]
    if x**2 + y**2 < 1:
        inner += 1
print(inner *4 / SAMPLES)   # 3.1x

c1 = plt.Circle((0, 0), radius=1, fc="None", ec="r", linewidth=3)
ax = plt.gca()
ax.add_patch(c1)

plt.axis("scaled")
plt.xlim(0, 1)
plt.ylim(0, 1)

plt.scatter(xs, ys, marker="x")
plt.show()

f:id:paiza:20171227141838p:plain

正確ではないですが、円周率と点の様子が図で表示されました!図で確認できるとわかりやすいですね。

ここではとりあえず1000点で計算してみましたが、"SAMPLES=1000"を書き換えて、点の数を変えて計算してみてもいいですね。

CSVファイルの取得・表示

今度は、世界の人口をグラフで表示してみます。

datahub.ioというサイトで人口推移データがCSVファイルとして公開されていますので、読み込んで表示させます。CSVファイルの読み込みにはPandasを利用します。PaizaCloudではPandasもインストール済みですので、すぐに試せます。

pandas.read_csvCSVファイルを読み込み、Pandasで"Country Code"が"WLD"のデータを抽出して、plot関数で表示します。

%matplotlib inline
import requests
url = 'https://datahub.io/core/population/r/population.csv'
response = requests.get(url)

with open('population.csv', 'wb') as csv_file:
    csv_file.write(response.content)

import pandas
population = pandas.read_csv('population.csv', index_col=2)

plot = population[population['Country Code'] == 'WLD'].plot(title='World Population', lw=2, colormap='jet', marker='.', markersize=10)
plot.set_xlabel("Year")
plot.set_ylabel("Population")

保存したCSVファイルは、画面左側のファイルファインダーで確認したり、ダウンロードしたりできます。CSVファイルをダブルクリックして開いてみましょう。

f:id:paiza:20171227142622p:plain

ここではJupyter Notebook上のPythonコードでCSVファイルを取得していますが、wgetなどのツールで取得することもできます。また、作ったデータをファイルとして保存し、再利用やダウンロードをしたり、他のプログラムで処理することも簡単にできます。

PaizaCloudではこのように、Jupyter NotebookだけではなくLinuxサーバ環境もそのまま使えます

グラフでの日本語表示

先ほどは世界の人口を表示しましたが、今度は日本の人口推移を表示してみましょう。

"Country Code"を"WLD"(世界)から"JPN"(日本)に変えてみます。

ちなみにPaizaCloudは日本語フォントも設定済みなので、グラフでも日本語がすぐに利用できます。

グラフのタイトルやラベルを、日本語に設定してみます。

%matplotlib inline
import requests
url = 'https://datahub.io/core/population/r/population.csv'
response = requests.get(url)

with open('population.csv', 'wb') as csv_file:
    csv_file.write(response.content)

import pandas
population = pandas.read_csv('population.csv', index_col=2)

plot = population[population['Country Code'] == 'JPN'].plot(title='日本の人口', lw=2, colormap='jet', marker='.', markersize=10)
plot.set_xlabel("年")
plot.set_ylabel("人口")

f:id:paiza:20171227142457p:plain

他の国や地域を指定して、いろいろな地域の人口グラフを見てもいいですね。

スクレイピング

今度は、WebサイトからHTTPでファイルを取得して処理してみましょう。

request.getでHTMLファイルを取得し、lxmlでパースしたあと、matplotlibで表示してみます。

Jupyter Notebookで、直接画像が表示されるので便利ですね。

%matplotlib inline
import requests, lxml.html, io
from PIL import Image
import matplotlib.pyplot as plt

res = requests.get("http://paiza.hatenablog.com/entry/paizacloud_sinatra/2017/12/19")
root = lxml.html.fromstring(res.text).getroottree()

for imgElement in root.xpath('//img')[0:10]:
    url = imgElement.attrib['src']
    res = requests.get(imgElement.attrib['src'])
    image = Image.open(io.BytesIO(res.content))
    plt.figure(figsize = (2,2))
    plt.imshow(image)

f:id:paiza:20171227142821p:plain

ブログに埋め込まれた画像が表示されました。

URLをいろいろ変えて試してみてもいいですね。

スクレーピングについては、こちらの記事も参考にしてみてください。

paiza.hatenablog.com

まとめ

というわけで、Jupyter NotebookをPaizaCloudで動かして、Pythonプログラムを作ってみました。

図や表を使ってブラウザ上に結果を表示させながらプログラムを書くことができるので、簡単にいろいろ試してみることができましたね。

上記の内容は、面倒な環境構築やインストールをしなくてもクラウド上で動かせるので、他のPCやタブレットなどでも簡単に確認できます。

データ処理やスクレイピング機械学習などに便利ですので、ぜひ使ってみてください。


PaizaCloud」では、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。 https://paiza.cloud


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

詳しくはこちら

paizaラーニング

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

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

詳しくはこちら

paizaのスキルチェック

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza