プログラミングの初心者が、短期間でWebサイトの作成方法を学ぶには、どのような順番で勉強していけば良いでしょうか？ 今回は、基本となる技術要素を検討してみます。 Webサイト制作に関わる知識はたくさんありますが、まずは基本となる骨格を作り、さらに周辺の知識を肉付けしていけば、時間の短縮になると思います。 1周目：基本 1周目のWebデザイン 1周目のWebプログラミング 1周目のWebサーバー管理 2周目：肉付け 2周目のWebデザイン 2周目のWebプログラミング 2周目のWebサーバー管理 3周目 分類の方法にも拠りますが、Web開発には主に３つの分野／技術要素があります。 Webデザイン Webプログラミング Webサーバー管理 それぞれに必要となってくる知識を見てみましょう。 イラスト図解式 この一冊で全部わかるWeb制作と運用の基本 作者:NRIネットコム株式会社,小出修平,塚田

Webページの表示を高速化する手段として「AMP」という仕組みがあります。 Accelerated Mobile Pages (AMP) とは？ Accelerated Mobile Pages - Wikipedia Accelerated Mobile Pages (AMP) は、Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。 また、AMPの成果物である一連の仕様やライブラリなどについてもAMPと呼ぶ。 AMPは、従来より用いられているHTMLなどのウェブ技術を改良したもので、中核となるのはAMP HTMLと呼ばれるHTMLの一種である。 構成 AMPは、大きく分けて、AMP HTML、AMP JSそしてAMP Cacheの3つの部分からなる。 AMP HTMLは、ウェブページを記述するためのマークアップ

Webサーバーのエラーログを見たら、海外からのアタックがたくさんありました。 日本国内から見られるだけでOKのサイトに関しては、IPアドレスによるアクセス制限を設定して、海外からのアタックを阻止してみます。 国別IPアドレスによってアクセスの許可と拒否を分ける。 Webサーバーソフトの「Nginx」で設定する。 （参考） 以下の記事を参考にしました。 qiita.com programming-beginner-zeroichi.jp nami.jp これで、日本国内のみからWebサーバーにアクセスを許可する設定にできました。 例外の追加 海外からのアタックは遮断できたけど、アメリカにあるGoogleのサーバーからもアクセスできなくなりました。（汗） 利用しているGoogleのサービスだけはアクセスを許可したいので、GoogleのIPアドレスもアクセス許可リストに追加します。 jsstud

Webサーバーにアクセス制限を設定して、外部からサーバーへの攻撃を防御しています。 利用しているGoogleのサービスからのアクセスは通さないといけないので、GoogleのIPアドレスを調べてみました。 Googleのサービスには、どんなIPアドレスが割り当てられているのでしょうか？ Google サービス IPアドレス - Google 検索 support.google.com DNSで調べる方法 GoogleのIPアドレス（CIDR表記） ip4: ip6: （参考） digコマンドの使い方 SPFとは？ まとめ DNSで調べる方法 dev.classmethod.jp Googleが使っている公開IPアドレスを取得したいと思います。以下のSPFを見ればOKなようです。 $ dig -t txt _netblocks.google.com 410gone.click Googleが利

WindowsパソコンからLinuxのWebサーバーにSSHでリモート接続するとき、RLogin等の端末ソフトを使っています。 普通は、１つのSSH接続に対して、１つの操作画面が表示されます。 しかし、同時にいろんなディレクトリーを見ながら作業する場合、画面が１つだとディレクトリーの切り替えが忙しくて不便です。 端末ソフトを複数立ち上げて、画面を増やしても良いのですが、「tmux」というソフトを使うと、１つの端末ソフトで複数の画面を表示させることができるようになります。 tmuxとは？ tmux - Wikipedia tmux is a terminal multiplexer for Unix-like operating systems. It allows multiple terminal sessions to be accessed simultaneously in a s

Webサイトをどうやって作っているか？を調べるツールがありました。 「Wappalyzer」というツールです。 www.wappalyzer.com Wappalyzerは、ChromeやFirefoxのプラグインとして提供されており、インストールすると使えます。 ブラウザーでWebサイトを閲覧したとき、Wappalyzerのアイコンをクリックすると、そのWebサイトで使われているソフトやサービスなどが表示されます。 （例）はてなブックマークを見たときは、以下のような内容が表示されました。 Webサーバーソフトは「Nginx」、キャッシュソフトには「Varnish」を使っていることなどが分かります。 これでいろんなWebサービスを調査してみれば、Webサイト制作の参考になりそうですね！ Wappalyzerの参考情報 forest.watch.impress.co.jp www.leon-

テストサーバーにUbuntuをインストールしました。 Webサーバーを構築するための下準備を進めてみたいと思います。 ファイヤーウォール SSH Nginx SSL MySQL PHP Ruby パッと思いつくところは、こんなものでしょうか？ Ubuntuのファイヤーウォール ufwとは？ ufwの情報源 ufwの注意点 ufwの使い方 ufwのGUI「Gufw」 ufwのバージョン確認 ufwのインストール Gufwのインストール Gufwの起動 まとめ Ubuntuのファイヤーウォール CentOSの場合は、ファイヤーウォールとして「iptables」や「firewalld」が用意されています。 Ubuntuの場合は、「ufw」というツールが用意されていました。 ufwとは？ himachannel.com Ubuntuで標準的に利用できるfirewall機能 Uncomplicate

テストサーバーにUbuntuをインストールしましたが、Webサーバーの環境構築は、Docker等の仮想化技術を利用してみたいです。 Dockerで「コンテナ」を作ると、他のサーバーに「コンテナ」ごと移動させることができて、便利みたいです。 Dockerを使うに当たって、Dockerの勉強をしておきたいと思います。 Dockerの情報源 Dockerの仕組み Dockerのインストール Dockerの使い方 Dockerのコンテナ作成 Dockerの本 Kubernetes Dockerの情報源 公式サイト www.docker.com GitHub github.com Wikipedia Docker - Wikipedia Ubuntu用の無料版（Community Edition）のDocker docs.docker.com Dockerの仕組み www.publickey1.jp

大量のファイルを管理するために、OpenStackのオブジェクトストレージを試してみたいと思いました。 OpenStack Docs: Object Storage サービスの概要 OpenStackは、Ubuntuをサポートしているそうなので、テストサーバーにUbuntuをインストールしてみました。 OpenStack: 分散オブジェクトストレージ Swift「インストール手順」 | VA Linux Systems Japan株式会社 RHELやCentOS上にSwiftをインストールすることも出来ないことはありませんが、採用するディストリビューションに制約が無いのであれば、Ubuntuを選択するのが賢明です。OpenStackプロジェクトでは、Ubuntuを標準プラットホームとして開発を進めているため、Ubuntu用のパッケージが標準で用意されており、また最も動作実績のあるプラットホ

JavaScriptを学習してWebサイトを作れるようになったら、公開用のWebサーバーが欲しくなります。 Webサーバーは、どうやって用意したら良いでしょうか？ テストサーバー 仮想環境 レンタルサーバー 「マネージド」と「アンマネージド」の違い 無料サーバー XREA Heroku Google App Engine 無料サーバーまとめ 有料サーバー サーバー管理者権限の有無を確認 VALUE-DOMAIN さくらインターネット Amazon Web Services AWSの対抗馬 ベンダーロックイン対策 オンプレミスサーバー サーバーの用意 回線の用意 固定IPアドレスの用意 変動IPアドレスの場合 ダイナミックDNS VPN ルーターの用意 YAMAHA CISCO SSL証明書 無料のSSL 有料のSSL 独自のSSL CDN 無料のCDN 有料のCDN Webサーバー構築例