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

また、簡単にデータベースを構築したり独自のAPIを作成したりすることも可能で、使い方次第では簡単なWebアプリまで作れるポテンシャルを秘めているのが特徴です。 非常に多機能なサービスということもあり、初心者の方から上級者まで幅広く楽しめるのでぜひ参考にしてみてください!

続きを読む
paiza開発日誌 IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。 トップ > プログラミング初心者 > 無償のデータベースと連携可能!Webサイトもブログも作り放題な「AppDrag」を使ってみた 2018-01-09 無償のデータベースと連携可能!Webサイトもブログも作り放題な「AppDrag」を使ってみた プログラミング初心者 開発ネタ Webサービス紹介 Webデザイン f:id:paiza:20180109095301j:plain f:id:paiza:20151215103844j:image:w50どうも、まさとらん(@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 jQuery・cURL・Node.js・C#・PHP・Python・Ruby・Goなどの言語から、作成したAPIを使うプログラム例も一緒に掲載されているのが分かります。 試しに、jQueryからAPIを使ってデータを取得するとこんな感じ。 f:id:paiza:20180109100201j:plain ちゃんと取得できましたね! このように、「AppDrag」のバックエンド機能を活用すれば、データベースを使ったWebアプリも簡単に実現することが可能です。 単純なWebサイトを作成するのもいいですが、さまざまなデータを活用したWebアプリを開発するのもきっと楽しいでしょう! ■PythonやJavaScriptなどの講座が完全無料!動画でプログラミングが学べるレッスン paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を公開しています。 AppDragのようなサービスを使いつつ、プログラミングをしてWebサイトの作成・編集ができるようになりたい方、SQLを書いてデータベースを操作できるようになりたい方にもおすすめです。 JavaScript、SQL、HTML/CSS、Python、Java、C言語、PHP、Rubyなど、プログラミング初心者でも動画で学べる入門レッスンが多数ございます。プログラミング初心者の方はぜひごらんください! また、今まで有料だった「Python入門編」・「ITエンジニアの就活準備編」(※就活生じゃなくても受講できて転職活動にも役立ちます!)が、本日から【全編無料】となりましたのでぜひごらんください! 詳しくはこちら paizaラーニング ■まとめ 今回は、「AppDrag」の基本的な機能を駆け足でご紹介しました! 非常に多機能なサービスではあるものの、使い方としては簡単に扱えるような設計になっているので初心者の方でもすぐに使えるようになるはずです。 また、作成したWebサイトはすべてプログラミング可能で、データベースとの連携もできるので上級者も楽しんで長く使い続けられるサービスといえるでしょう。 ぜひ、みなさんもオリジナルのWebサイトやアプリを開発&公開してみてはいかがでしょうか! <参考> 「AppDrag」公式サイト 「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。 そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。 スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。 paizaのスキルチェック ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza paiza 4日前 関連記事 Webサイトにチャットやアンケートなど7種の機能を簡単に追加できる「GetSiteControl」を使ってみた! 2017-11-22 Webサイトにチャットやアンケートなど7種の機能を簡単に追加できる「GetSiteControl」を… どうも、まさとらん(@0310lan)です!今回は、Webサイトに「チ… プロトタイプにも最適! 誰でもWebサイトを爆速開発できる無料Webサービスをまとめてみた! 2017-11-02 プロトタイプにも最適! 誰でもWebサイトを爆速開発できる無料Webサービスをまとめてみた! どうも、まさとらん(@0310lan)です!今回は、誰でも簡単に最… Webアプリ、ゲーム、IoTまで!ブラウザだけでJavaScript開発環境が構築できるWebサービスまとめ 2017-08-24 Webアプリ、ゲーム、IoTまで!ブラウザだけでJavaScript開発環境が構築できるWebサービ… どうも、まさとらん(@0310lan)です!今回は、ブラウザだけで… 一度使えばもう手放せない! Web制作の効率を上げる厳選Webサービスまとめ! 2016-08-23 一度使えばもう手放せない! Web制作の効率を上げる厳選Webサービスまとめ! どうも、まさとらん(@0310lan)です。今回は、Webサービスやサ… 知らなきゃ損するGoogle Apps Scriptの外部JSONデータ連携術!すべて無料で作る「お天気Webアプリ」の作り方を大公開! 2016-08-09 知らなきゃ損するGoogle Apps Scriptの外部JSONデータ連携術!すべて無料で作る「お… どうも、まさとらん(@0310lan)です。みなさんは、「Google Ap… コメントを書く « サーバ構築不要で簡単!PaizaCloudを使っ… 完全無料!動画で実践的なWebプログラミン… » 初心者向け無料 プログラミング入門 paizaラーニング PHP入門編(4レッスン) Python 3入門編(4レッスン) Ruby入門編(6レッスン) Java入門編(4レッスン) JavaScript入門編(2レッスン) HTML/CSS入門編(3レッスン) DB/SQL入門編(2レッスン) Rails入門編 Webアプリ開発入門編 アルゴリズム入門編 20141003172808 プロフィール id:paiza id:paiza はてなブログPro IT/Webエンジニア向け総合求人・学習サービス「paiza(https://paiza.jp)」の開発者が開発の事、プログラミングネタ、エンジニアの転職などについて書いています。 読者になる 1998 RSS rss paiza[パイザ] paiza プログラミング力で勝負できるエンジニアの転職サイト リンク paiza[パイザ] 公式Facebookページ 公式Twitterアカウント 検索 月別アーカイブ ▼ 2018 (4) 2018 / 1 (4) ▶ 2017 (235) ▶ 2016 (166) ▶ 2015 (143) ▶ 2014 (60) ▶ 2013 (9) 最新記事 【19卒】エンジニア&採用担当に何でも聞ける!プログラミング勉強会開催 2018-01-12 【19卒】エンジニア&採用担当に何でも聞ける!プログラミング勉強会開催 paiza新卒では、2月17日(土)にプログラミング勉強会&新卒エンジニア募集企業説明会… Pythonを使ってビットコインのアドレスを生成したので解説する 2018-01-11 Pythonを使ってビットコインのアドレスを生成したので解説する Photo by BTC Keychain 秋山です。最近ビットコインなどの仮想通貨が話題になってま… サーバ構築不要で簡単!PaizaCloudを使って、RubyでさくっとTwitter bot作ってみた 2018-01-10 サーバ構築不要で簡単!PaizaCloudを使って、RubyでさくっとTwitter bot作ってみた プログラミングをはじめると、実際に何か作って公開したくなりますね。そんな時に最… 無償のデータベースと連携可能!Webサイトもブログも作り放題な「AppDrag」を使ってみた 2018-01-09 無償のデータベースと連携可能!Webサイトもブログも作り放題な「AppDrag」を使ってみた どうも、まさとらん(@0310lan)です!今回は、初心者の方でも簡単にWebサイトやブロ… 注目記事 「ITエンジニアに向いていない人」に共通する5つの特徴 「ITエンジニアに向いていない人」に共通する5つの特徴 デキる人はやってる!目標の立て方とやる気アップの方法4つ デキる人はやってる!目標の立て方とやる気アップの方法4つ 初心者でも簡単にできるPythonの環境構築とエディタで実行する方法 初心者でも簡単にできるPythonの環境構築とエディタで実行する方法 プログラミングをスマホで学べる時代がきた!ほぼ無料のプログラミング学習アプリ8選 プログラミングをスマホで学べる時代がきた!ほぼ無料のプログラミング学習アプリ8選 初心者でもほぼ無料でPythonを勉強できるコンテンツ10選 初心者でもほぼ無料でPythonを勉強できるコンテンツ10選 初心者でもほぼ無料でJavaを勉強できるコンテンツ10選 初心者でもほぼ無料でJavaを勉強できるコンテンツ10選 転職活動、書類選考で落とされる書き方の共通点【こんな書類はダメだ】 転職活動、書類選考で落とされる書き方の共通点【こんな書類はダメだ】 機械学習初心者が、素早く学べるコンテンツとライブラリ20選(Python編) 機械学習初心者が、素早く学べるコンテンツとライブラリ20選(Python編) 【凄腕Webエンジニア7人に聞いてみた】どんな開発環境や便利ツール使って仕事してるの? 【凄腕Webエンジニア7人に聞いてみた】どんな開発環境や便利ツール使って仕事してるの? ゲームで遊ぶだけ!気付いたらプログラミングできるようになれるサービス14 ゲームで遊ぶだけ!気付いたらプログラミングできるようになれるサービス14 カテゴリー イベント告知/レポート (92) 新卒/就活 (98) 開発ネタ (120) プログラミング (109) プログラミング初心者 (224) プログラミング学習 (215) Webサービス紹介 (217) PaizaCloud (5) Webデザイン (10) プログラミング教育 (26) フレームワーク (8) 面接対策 (36) 第二新卒 (14) 転職者インタビュー (11) ITエンジニアの転職 (82) ITエンジニアのキャリア (127) 書籍紹介 (59) アルゴリズム (11) ITエンジニアの採用 (19) 機械学習 (8) 既卒 (4) 内定者インタビュー (18) 連載:すべてうまくいく (10) ネタ (33) ディレクション (2) 起業/スタートアップ (5) オンラインハッカソン (30) Docker (8) アニメ/漫画 (9) 企画 (1) 競技プログラミング (2) MEANスタック (3) 著作権 (1) リモートワーク (3) UI/UX (3) ITプログラマー・エンジニア転職・就活・学習のpaiza プログラミング入門講座|paizaラーニング PHP入門編| Ruby入門編| Python入門編| Java入門編| JavaScript入門編| C言語入門編| C#入門編| アルゴリズム入門編 エンジニアのためのプログラミング転職サイト|paiza転職 プログラミング スキルチェック| エンジニア求人一覧 未経験からエンジニアを目指す人の転職サイト|EN:TRY プログラミング スキルチェック| エンジニア未経験可求人一覧 エンジニアを目指す学生の就活サイト|paiza新卒 プログラミング スキルチェック| エンジニア求人一覧 ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud