SlideShare a Scribd company logo
1 of 35
Download to read offline
レンタルサーバで今すぐ始めるWEB開発

     Naoyuki Kataoka
宣伝

• 「一日で一番素敵な瞬間をカメラに
  おさめて友達と共有しようというリア
  充アプリMy365」を作成中です。

• My365 ←[検索]



                      2
My365 ←[検索]

• 「いいね!」ください。m(__)m




                      3
自己紹介

• 名前: 片岡直之
• Twitter: @katty0324
• モットー「動けばいいじゃん」



     このアイコンの人→


                        4
作ったもの

• WEBアプリ8個くらい
  – TwitCrew
  – studylog
• mixiアプリ7個くらい
• (Windowsゲーム)

• http://cafetable.net/

                          5
本題




「プログラミング勉強したいけど、
 何から始めていいか分からない」



               6
レンタルサーバを借りてみよう

• ロリポップ http://lolipop.jp/




                             7
なんで?

1.   すぐ使える!
2.   環境をセットアップしなくていい!
3.   すぐに皆が訪問できる状態にできる!
4.   安い!
5.   ユーザーが多いから情報も多い!

 →要するに難しいことを考えなくていい

                      8
1. すぐ使える!

• 5分で登録できます。
• 10日間は無料で使えます。

• コロリポプラン ←プログラミングに向かない
• ロリポプラン ←選択!
• チカッパプラン ←ちょっと高い

• https://lolipop.jp/order/form/loli-dom/
                                        9
2. 環境をセットアップしなくていい!

•   Linuxのインストール
•   Apacheのインストール
•   MySQLのインストール
•   PerlやPHPのインストール
•   DNSの設定、 FTPの設定、sendmailの設
    定、etc…

    →要りません。最初から全部入ってます。
                            10
3. すぐに皆が訪問できる状態にできる!

• 登録時にURLを決めます。
  (ex. http://katty.lolipop.jp/)

• サーバに何か置きます。

• 友達にURLを教えます。

• 見えます。

                                   11
4. 安い!

• 月額315円
• 初期費用1,575円
• 10日間無料



 →中学生でも借りられる良心的価格!



                     12
5. ユーザーが多いから情報も多い!

• 100万人近いユーザーがいます。

• 困ったら、「lolipop perl ○○ 動かない」
  とかでググれば答えが落ちています。




                                13
登録してみました。




ロリポおじさん

          コロリポおじさん



                     14
http://katty.lolipop.jp/

• エラーが表示された。




                               15
FTPを開きます。

• WEB上でファイルが操作できる。
• welcome.htmlというファイルだけある。




                             16
http://katty.lolipop.jp/welcome.html

• ウェルカム画面的なものが出た。




                                        17
魔法のファイル名 index.html

• Index.htmlというファイルを作る。




                          18
HTMLを書く




          19
HTMLの構造

• HTMLのLはLanguageのLなので立派な
  言語です。
  (プログラミング言語とは言わない)
 <html>          html
  <body>           body
   <h1>                 h1
    It works!                It works!
   </h1>
  </body>
 </html>

                                         20
表示できる!

• 自由に書き換えれば、ホームページが
  できる。




                      21
HTMLの覚え方

• HTMLの構造だけ覚えればあとは装飾
  用のタグを知るだけ。




                       22
Index.html→index.php

• 拡張子をphpにすると、PHPで書かれた
  ファイルと認識される。
• index.htmlで動いていたものが、そのま
  まindex.phpでも動く。

• ※Perlではこうはいかない。index.plに変
  えると動かなくなる。


                             23
PHPを書く!

<html>            • <?php ?>というタグを置
 <body>             く。
  <h1>
   It works!
   <?php          • その間にPHPのプログラ
     // ここにPHP      ムを書く。
   ?>
  </h1>           • アクセスする。
 </body>
</html>
                  • 動く!

                                      24
現在時刻を表示してみる。

<html>                             • <br/>: 改行
 <body>
  <h1>
   It works! <br/>                 • echo: 表示を指
   It is <?php                       示する関数
     echo(date('H:i:s',time()));   • date: 時刻を文
   ?> now.
  </h1>
                                     字列にする関数
 </body>                           • time: 現在時刻
</html>                              を取得する関数


                                                  25
表示できる!

• 現在時刻が表示できる。
• リロードするたびに変わる。(アクセスす
  るたびにプログラムが動いている!)




                        26
何か間違っていたらエラーメッセージが出る

• エラーメッセージをググれば大抵解決法
  が見つかる。




                   27
PHP関連のオススメ書籍

• 何か1冊通して読むといい。




                   28
Lolipop FTPの問題

• エディタで日本語が使えない?(たぶん)




→グローバルなWEBサイトを作りましょう。




                        29
次のステップ

•   FTPソフトをインストールして使う。
•   エディタをインストールして使う。
•   CSSで綺麗にデザインする。
•   独自ドメインでURLをかっこ良くする。




                          30
FTPソフトをインストールして使う

• 自分のPC上でファイルを編集・管理して
  アップロードする。
 – FFFTP
 – FileZilla




                        31
エディタをインストールして使う

• コードを補完してくれたり、色をつけてく
  れたり、色々と便利な機能がある。
 – Aptana
 – NetBeans
 – (メモ帳)




                        32
CSSで綺麗にデザインする。

• 最近はHTMLからデザインを切り出して
  別に*.cssというファイルを作る。

• HTMLとはまた別の記述が必要。
  (WEB開発は覚えることが多い)




                        33
独自ドメインでURLをかっこ良くする。

• http://muumuu-domain.com/




                              34
まとめ

• レンタルサーバを借りれば、すぐプログ
  ラミングの練習できる状態になる!

• とりあえず何かプログラムを書いてみ
  る!

• すると、楽しくていつの間にかできるよう
  になってる!

                       35

More Related Content

Similar to レンタルサーバで今すぐ始めるWEB開発

PHP でも活用できる Makefile
PHP でも活用できる MakefilePHP でも活用できる Makefile
PHP でも活用できる MakefileShohei Okada
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?Shinichi Nishikawa
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?Fuminori Mori
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1Nishida Kansuke
 
2011 PHPカンファレンス関西 懇親会LT
2011 PHPカンファレンス関西 懇親会LT2011 PHPカンファレンス関西 懇親会LT
2011 PHPカンファレンス関西 懇親会LTTakako Miyagawa
 
Cmsインサイド 120801 公開版
Cmsインサイド 120801 公開版Cmsインサイド 120801 公開版
Cmsインサイド 120801 公開版株式会社RYUS
 
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開しますMODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開しますKei Mikage
 
エンジニアという職業について
エンジニアという職業についてエンジニアという職業について
エンジニアという職業についてHisatoshi Kikumoto
 
Xoopsサイト制作セミナー 20120922
Xoopsサイト制作セミナー 20120922Xoopsサイト制作セミナー 20120922
Xoopsサイト制作セミナー 20120922Toshihiro Takehara
 
Pyconjp2016 pyftplib
Pyconjp2016 pyftplibPyconjp2016 pyftplib
Pyconjp2016 pyftplibShinya Okano
 
なんとかStormに負けたくないEmacs初級篇
なんとかStormに負けたくないEmacs初級篇なんとかStormに負けたくないEmacs初級篇
なんとかStormに負けたくないEmacs初級篇Kenta USAMI
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座Shinichi Nishikawa
 
Status Board 面白いよ!
Status Board 面白いよ!Status Board 面白いよ!
Status Board 面白いよ!Hishikawa Takuro
 
Chrome-eject がこの先生きのこるには
Chrome-eject がこの先生きのこるにはChrome-eject がこの先生きのこるには
Chrome-eject がこの先生きのこるにはYosuke HASEGAWA
 
WEB TOUCH MEETING #52
WEB TOUCH MEETING #52WEB TOUCH MEETING #52
WEB TOUCH MEETING #52Tao Sasaki
 
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature EngineersIntroduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature EngineersTakeshi Arabiki
 

Similar to レンタルサーバで今すぐ始めるWEB開発 (20)

PHP でも活用できる Makefile
PHP でも活用できる MakefilePHP でも活用できる Makefile
PHP でも活用できる Makefile
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
 
20090828 Webconlocal
20090828 Webconlocal20090828 Webconlocal
20090828 Webconlocal
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
 
2011 PHPカンファレンス関西 懇親会LT
2011 PHPカンファレンス関西 懇親会LT2011 PHPカンファレンス関西 懇親会LT
2011 PHPカンファレンス関西 懇親会LT
 
Cmsインサイド 120801 公開版
Cmsインサイド 120801 公開版Cmsインサイド 120801 公開版
Cmsインサイド 120801 公開版
 
MODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開しますMODXで“超”キレッキレのブログ作る秘訣公開します
MODXで“超”キレッキレのブログ作る秘訣公開します
 
ServiceとRepository
ServiceとRepositoryServiceとRepository
ServiceとRepository
 
Webサーバ、HTML
Webサーバ、HTMLWebサーバ、HTML
Webサーバ、HTML
 
エンジニアという職業について
エンジニアという職業についてエンジニアという職業について
エンジニアという職業について
 
Xoopsサイト制作セミナー 20120922
Xoopsサイト制作セミナー 20120922Xoopsサイト制作セミナー 20120922
Xoopsサイト制作セミナー 20120922
 
Pyconjp2016 pyftplib
Pyconjp2016 pyftplibPyconjp2016 pyftplib
Pyconjp2016 pyftplib
 
なんとかStormに負けたくないEmacs初級篇
なんとかStormに負けたくないEmacs初級篇なんとかStormに負けたくないEmacs初級篇
なんとかStormに負けたくないEmacs初級篇
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
Yapc2012資料
Yapc2012資料Yapc2012資料
Yapc2012資料
 
Status Board 面白いよ!
Status Board 面白いよ!Status Board 面白いよ!
Status Board 面白いよ!
 
Chrome-eject がこの先生きのこるには
Chrome-eject がこの先生きのこるにはChrome-eject がこの先生きのこるには
Chrome-eject がこの先生きのこるには
 
WEB TOUCH MEETING #52
WEB TOUCH MEETING #52WEB TOUCH MEETING #52
WEB TOUCH MEETING #52
 
Introduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature EngineersIntroduction to Favmemo for Immature Engineers
Introduction to Favmemo for Immature Engineers
 

More from Naoyuki Kataoka

シロク流事業の立ち上げ方の成功と失敗
シロク流事業の立ち上げ方の成功と失敗シロク流事業の立ち上げ方の成功と失敗
シロク流事業の立ち上げ方の成功と失敗Naoyuki Kataoka
 
成長する組織を支えるシロクの自動化
成長する組織を支えるシロクの自動化成長する組織を支えるシロクの自動化
成長する組織を支えるシロクの自動化Naoyuki Kataoka
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」Naoyuki Kataoka
 
Lightning-fastなライトニングトーク
Lightning-fastなライトニングトークLightning-fastなライトニングトーク
Lightning-fastなライトニングトークNaoyuki Kataoka
 
スマホアプリの収益のモデリング
スマホアプリの収益のモデリングスマホアプリの収益のモデリング
スマホアプリの収益のモデリングNaoyuki Kataoka
 
Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス
 Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス
Objective-CのBlocksの循環参照に関する僕なりのベストプラクティスNaoyuki Kataoka
 
Web若手エンジニアの会(仮)
Web若手エンジニアの会(仮)Web若手エンジニアの会(仮)
Web若手エンジニアの会(仮)Naoyuki Kataoka
 

More from Naoyuki Kataoka (8)

シロク流事業の立ち上げ方の成功と失敗
シロク流事業の立ち上げ方の成功と失敗シロク流事業の立ち上げ方の成功と失敗
シロク流事業の立ち上げ方の成功と失敗
 
成長する組織を支えるシロクの自動化
成長する組織を支えるシロクの自動化成長する組織を支えるシロクの自動化
成長する組織を支えるシロクの自動化
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
 
Lightning-fastなライトニングトーク
Lightning-fastなライトニングトークLightning-fastなライトニングトーク
Lightning-fastなライトニングトーク
 
スマホアプリの収益のモデリング
スマホアプリの収益のモデリングスマホアプリの収益のモデリング
スマホアプリの収益のモデリング
 
Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス
 Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス
Objective-CのBlocksの循環参照に関する僕なりのベストプラクティス
 
Web若手エンジニアの会(仮)
Web若手エンジニアの会(仮)Web若手エンジニアの会(仮)
Web若手エンジニアの会(仮)
 
Facebook Night vol. 6
Facebook Night vol. 6Facebook Night vol. 6
Facebook Night vol. 6
 

レンタルサーバで今すぐ始めるWEB開発