blog - みきまるしぇ

2018年08月

Bootstrap 4の本

 先日こちらでご紹介したHTMLとCSSの本はすぐに読み終わり、現在はBootstrap 4の本を読んでいます。

 前回の本がとても波長に合ったので、今回もできるだけ似たような雰囲気で学べる電子書籍はないかと思っておりましたところ、Bootstrap 4の本が技術評論社から発売されたばかりということで、渡りに船とばかりに、そちらを読みはじめました。

(AmazonのKindle本を購入しましたが、活字でも値段は同じ3,542円です)

 Bootstrapというのは、もともとはTwitter社が開発したレスポンシブウェブデザインのアプリケーションです。こう書くと自分でもカタカナが多くてわかりにくいと思いますが、レスポンシブというのは、パソコンでもスマホでもタブレットでも、見る人の環境(使っている画面の大きさなど)を判断してそれに適した画面を表示できる状態を指します。もともとTwitterのようにスマホなど小さな画面で見る利用者のほうが多かったであろうウェブサービスにとっては、とても重要な技術だったのですね。

 これはこのサービスを使いたい人がウェブサイト上に最低限のファイルを置いておき、ウェブページ上からBootstrapを呼び出すことでレスポンシブなデザインを可能にする仕組みです。多くのウェブサイトでバージョン3が使われていますが、わたしのようにこれから開始する人間は4がよいだろうと、勉強をはじめました。

 また読み終わったら、次の本をご紹介します。

 なお、コンピュータの本も含めてわたしの書評は、Biblio Mikimaru というブログ → biblio-mikimaru.sblo.jp に掲載されていますので、よろしければご覧ください。

≫ 続きを読む

雑記   2018/08/31   mikimarche

HTMLとCSSの本

 今日は用語解説の話題を少しお休みして、本のご紹介です。

 せっかくこうしたサイトを開始したわけですので、うろ覚えが多かった知識を整理すべく、何冊か本を読んでみることにしました。本日はこの本です。

 AmazonでKindle版を購入しましたので、パソコンの画面にこの本を開いたまま、横目でちらちら見てはエディタで練習します。ちなみに紙の本とKindleと値段は一緒で2,462円でした。



 いままでテキストエディタはさまざまなものを使ってきましたが、この本に紹介されていたBracketsというエディタが、ほんとうにもう「こういう作業にぴったり」なもので、驚きました。無料で利用できるエディタですので、安心してダウンロード可能です。

 ほんとうに簡単なところから書いてあるので、まるきり初めての人でも、とっつきやすいかもしれません。わたしのように、頭の整理として読んでも、なかなか優れものです。

 これが読み終えたら、また次の本をご紹介します。

≫ 続きを読む

雑記   2018/08/17   mikimarche

用語解説 - FTP -

 今日はFTPについて、書いてみます。もし簡単なホームページやブログのレンタル利用から一歩進んで、自分でレンタルサーバなどにソフトを設置する場合、必要になってくる知識です。

 FTPとは File Transfer Protocol の略で、ファイル転送のプロトコル(手順)という意味です。手持ちのファイルをレンタルサーバにアップロードしたり、あるいはパソコンにダウンロードするときに、FTPソフトを使うと簡単です。

 たとえばですが、荷物と倉庫を例にとります。

 裏の空き地に大きな倉庫を建てたとしましょう。ゆくゆくはレンタル倉庫として、利用者からダンボールが大量に送られてきます。
 倉庫を開始したばかりの段階では、自分と少人数のスタッフだけで、せっせと倉庫に入れたり、出したりすることができましたが、商売が繁盛し、たくさん送られてくるようになりました。そこで、長くからいるスタッフも、新しくやってくるスタッフも、誰でもすぐ対応できる荷ほどきと荷造りのルールを決めておくことになりました。これが決まり事(プロトコル)です。

 大きなダンボールが来たら中をどこまで開けるか、荷物をどういう順序に置くか、赤い箱と青い箱があったらどうするか、送り返してくれ(ダウンロードさせてくれ)と依頼があったら普通に詰めるか、あるいは圧縮して箱に入れるかを決めておこう——などなど、さまざまな約束事です。

 こうした約束事を理解しているFTPソフトというものを用意しておけば、パソコンとレンタルサーバ間で、ファイルを簡単に出し入れができるようになるというわけです。

 FTPソフト(FTPクライアントとも呼ばれます)には、有料のもの無料のもの、Mac用Windows用など、数多く存在しています。当サイトでは、この1年ほどFileZillaという無料ソフトを愛用しています。

≫ 続きを読む

ウェブサイト用語の基礎知識   2018/08/15   mikimarche

用語解説 - SSL -

 よく耳にするSSL(保護された通信)とは、なんでしょうか。

 SSLは Secure Socket Layer の略で、データの送受信を暗号化しておこなう手順です。こう書くと「え、わかったような、わからないような?」ということになってしまいますが、少し書いてみましょう…

 ウェブページ(ブラウザでご覧になっているこうしたページ)を、見るだけであるなら、そのページが保護されていてもいなくても、あまり大きな影響はありません。ただそのページ上にある何らかのボタンをクリックする、コメントをする、メールを送るなどの動作のとき、その人とウェブページ運営者のあいだでデータのやりとりが生じます。そのやりとりにはその人のメールアドレス、ID、パスワードなど、大事なものが含まれている場合もあるでしょう。そんな個人的なデータを横から覗いて悪用する人がいないよう、安全に保つための仕組みがSSLです。

 安全に保つ仕組みというのは…

  • まずSSLを利用したい側が、しかるべき会社や組織に自分はこれこれこういう者で、怪しくありませんと申請します(←普通は有料ですが、わたしの場合は、レンタルサーバの会社が一括してはいっているSSLのサービスを利用していますので個人で申請していませんし、有料でもありません)。
  • 申請に問題がなければ、その会社または組織から、鍵をもらいます。鍵が手にはいったら、それを使ってSSLの証明書というものを作ることができます。
  • 見に来た人のブラウザが、SSL通信を開始する際には、そこにある証明書と公開鍵を使ってサーバに「見に来たよ」と信号を送ります。その証明書に偽造や不審点がなければ、サーバとブラウザ間で、暗号化された通信をがおこなわれます。やりとりが終了するまでデータは暗号化されます。途中で盗み見る人がいたとしても、データを解読することが難しいので安全、ということになります。

 利用で注意すべき点もあります。たとえばそのサイトがSSLの証明書を持っていてURLの冒頭が https:// になっており、SSLの通信がおこなわれているかのように見える場合でも、過信はできません。よくあるのは、サイトの内部で使われている画像が自サイト以外(保護されていない場所)から呼び出している場合。これは、セキュリティとしてはランクが下がります。家の出入口は完璧に警備会社と契約していても、裏側の窓を開けているようなことにも、なりかねません。作る側も、訪れる側も、SSLという言葉を過信せず、注意を怠らないことです。

≫ 続きを読む

ウェブサイト用語の基礎知識   2018/08/09   mikimarche

用語解説 - CMS -

 ソフトウェアの仕組みや役割としては似ているSNSとCMSですが、利用者の目線で考えると、違いはどこにあるでしょうか。

 このウェブサイトを構築しているのは、CMSの一種でbaserCMSというソフトウェアです。CMSとは、コンテンツ管理システム (contents management system) の略ですが、実はソフトを設置して運営する側から考えると、仕組みとしてはけっこうSNSやブログと似ています。

 重なる部分も多くあるのですが、あくまでCMSはコンテンツ管理、つまり「手軽に見た目のよいウェブサイトを作成し、管理したい」という点に重きが置かれますので、SNSのように「参加してくれるメンバーの管理」が必要とはかぎりません。必要なのは書く側の人間(管理スタッフ)で、これは最低でもひとり登録されていれば動きます。また、CMSはブログ機能を利用せずに自分たちが伝えたいことだけ書くという選択肢もあるため、ブログのソフトとは「同じ部分もあるけれど、必ずしも同じではない」ということになります。

 CMSの例としては、このサイトが利用しているソフトbaserCMS(ベイサーシーエムエス)、本拠はアメリカですが日本語でもサポートが提供されているconcrete5(コンクリートファイブ)、会員制でログインした人にメニューを表示させることからSNSの性格を併せ持つXOOPS(ズープス)、それ以外にも多くあります。
 ブログソフトのWordPressは、かなり汎用性が高く機能拡張も可能なので、CMSとして分類されることもあります。

≫ 続きを読む

ウェブサイト用語の基礎知識   2018/08/08   mikimarche

用語解説 - SNS -

 TwitterやFacebookなどはSNSと呼ばれますが、いったいなんでしょうか。

 SNSは、ソーシャルネットワーキングサービス(このまま覚えてしまうのがよいですが、無理に説明するならば、人と人のつながりに基づき、そのつながりを支援しつつ、相互に影響を与えながら輪を広げていくサービス)です。

 TwitterやFacebookのように、誰かが発信した情報に共感していることを伝えたり(たとえば「いいね」を押す)、コメントすることで、相手の友達とも知り合いになるなどして、人間関係が広がっていきます。
 SNSが盛んになる以前には、それぞれのサイトに掲示板が設置してあるなどで、あくまでそのサイトに興味がある人同士が出会うというスタイルでした。大きなサービスを利用する人が増えて以降は、趣味が似ている人や同郷の人が集まりやすくなりました。ネットでの友達づきあいがより大きめになり、影響力も加速、増大しましたが、すべての利用者がネットの広く公的な空間にものを書いているわけではなく、友達同士でのみ閲覧できる場所や組みを利用している人も多く存在します。

 コメントなどを幅広く受けつけ、活発に活用されているブログも、ある意味でSNSです。

≫ 続きを読む

ウェブサイト用語の基礎知識   2018/08/08   mikimarche

用語解説 - php -

 html / css / MySQL につづき、php について書きます。

 PHPというのは、プログラミング言語のひとつで、Hypertext Preprocessorの略です。いまWebアプリケーションにとても多く使われています。この文章を書くのに使われているbaserCMSなど、多くのソフトがphpで書かれています。

 特徴としてはhtml形式の記述ファイル(拡張子は.php)に埋め込むことができて簡単に呼び出せること。たとえばメールフォーム、コメント投稿などです。ウェブページから呼び出したプログラムをサーバ側で動作させ、データベースと連携し、その出力結果としてhtml形式ファイルを生成してウェブ上に(拡張子は.php)表示してくれること…いや、こう書いてもよくわかりませんね。ええと、そうですね、表現を変えましょう。

ウェブページとphpの動作

  •  ガラスの箱に、注文したい商品名を書いて蓋をします。このガラスの箱が、画面に表示されているページ(html文法形式)です。
  •  蓋をすると、吸引力などの仕組みを利用して、紙がどこかへ吸い込まれていきます(phpプログラム)。
  •  吸い込まれた先で、商品手配のプログラムが動いて(プログラムの内容は見えません)、部屋のドアが開いて商品が現れ、最初のガラスの箱には明細と金額が送られてくるので、それを受けとってレジに行く。

 …こんなかんじでしょうか?

 では、ほかの言語で書かれたプログラムとどこが違うのかといいますと…いまウェブ用はほとんどがphpで書かれているので、あまり多くの事例とは、比較ができません。以前はウェブ上で動作するプログラムは広くcgiと呼ばれ、その場合はperlという言語で書かれていました。現在もperlで書かれたプログラムはあると思いますが、phpで書かれたアプリケーションの利用が増えています。
 ブラウザがあればネットにつながっていなくても楽しめるゲームはJavaScriptで書かれていることがほとんどですが、JavaScriptは画面に見えているファイルの中に、すべてのプログラムが収納されています。phpで書かれたものは、実際に動いているプログラム部分は利用者に見えず、原因(入力)と結果(出力)だけは、利用者が見られます。

 もう少しわかりやすい表現ができたら、追加編集します。

 

≫ 続きを読む

ウェブサイト用語の基礎知識   2018/08/03   mikimarche

用語解説 - MySQL -

 HTML / CSS につづきまして、次はデータベースのお話です。MySQLというものが広く使われています。

 ウェブサイトのアプリケーションで広く使われています「データベース」というもの。これはどういうときに必要かといいますと…

 大きなソフトウェア(たとえばこのbaserCMSや、NetCommonsなど、CMSと呼ばれるソフト、あるいは有名なWordPressなどブログに使われているもの)には、役割分担が必要となってきます。

html / css / mysql 役割

 この役割を洋服の箪笥(以下:タンス)に例えますと、HTMLの文法で書かれたファイルがタンス全体の枠、CSSが「引き出しの何段目は小さめでほかの段は大きめ」となど引き出しの役割を決め、データベースは「小さめのハンカチが来たら小さな引き出しにしまう、敷布が来たら大きな引き出しにしまう」と、整理して収納する係です。ブロガーやサイト運営者が何か書きつづると、データベースががんばって収納して、訪れた人に見やすく表示してくれるのです。

 データベースの種類にはいくつかあるのですが、多くのレンタルサーバで提供しているのはMySQLというものです。これが利用できるソフトも多く、わからないことは検索すればネット上に情報も豊富で、専門的に調べたい人には書籍も数多く出てきます。

 とても便利でよいものですが、ただ、とても大切なものですので、準備段階を終えて運営サイトが大きくなるころには、バックアップをとる方法、それを復元する方法だけは、調べておいたほうがいいと思います。

≫ 続きを読む

ウェブサイト用語の基礎知識   2018/08/03   mikimarche

用語解説 - css -

 htmlについてさっくり書きましたので、つづきましては、cssです。

 CSSは、カスケーディング スタイルシート(Cascading Style Sheets) の略です。すでに書きましたHTMLというファイルが文章の本体など内容に大きく関係するもので、CSSは、そこでよく使われるデザインを決めておくファイルとして、HTMLとセットで用意されていることが多いです。

HTMLとCSSの関係

 ただ、サイト内で使用したいHTMLが何百ページあろうとも、CSSはデザインの約束を決めておいてHTMLの表示を助けるファイルですので、数は少なくて済みます。記載内容が長くなってよければ、1ファイルで足りることもあるかもしれません。

 どんなことが書かれているものかといいますと、たとえば「画面上に横ラインを引きたい」というとき、HTMLでは HR というタグを使いますが、CSSでは「HTMLファイルで hr というタグを使うと書かれたら、どのくらいの幅で見た目はどんなラインにするか、このファイルで指定してある通りに」とデザインを受け持ちます。どのCSSファイルを見にいくかは、通常ならHTMLファイルの冒頭で宣言されています。

 大昔は、ひとつひとつのHTMLファイルの内部で「このラインは表示○○%」など、デザインそのものをHTMLで書いてしまっていることも多かったです。HTMLにも文法があり、古い文法で解説しているサイトでは、いまもそう書かれていますし、実際問題としてCSSファイルを分けていなくて、HTMLの内部にすべてデザインが書かれていた場合でも、ほとんどのブラウザでそれは普通に表示されます。

 ですがそれをやってしまうと、ひとつのHTMLファイルの内容が(見た目は同じでも中身としては)膨大な内容に膨らんでしまい、読むのに時間がかかったり、通信データ量も増えてしまい、よいことがあまりありません。

 古くからたくさんのページを作成していていまさら書き直すのはたいへんだという場合を除き、新しめの文法で、CSSファイルを分けて書いておいたほうが無難です。最近は何のソフトでも、HTMLやCSSがわからなくても勝手に補ってくれることが増えてきていますので、何もかもわかろうとしなくてよいのです。ただ理屈がわかっていれば人様が作ってくれたものを見ながら編集できますので、仕組みと最低限の理屈をわかっておくのは、先を考えると便利です。 

≫ 続きを読む

ウェブサイト用語の基礎知識   2018/08/03   mikimarche

用語解説 - html -

 とことん手作りのウェブサイトにこだわるか、サービスをレンタルするかはともかくとして、まずはインターネットの用語を整理しておくのもよいかと思います。

 

 まずは、HTML の話からはじめましょう。(文法の話として人前で使う場合はHTMLという大文字が一般的ですが、htmlと小文字で書いてはいけないということはなく、実質的にたいした違いはありません)

 これは Hyper Text Markup Language (ハイパー テキスト マークアップ ランゲージ) の略です。文字や文章の前後を約束に沿ったカギ括弧付きの文字(htmlタグ)で挟んで記述していきます。こう書いても意味はわかりづらいと思いますので、例を述べますと…

<b>今日はとても暑いです</b>
この場合の<b></b>が、タグです。
bは太い文字にするという意味、うしろの/bは、それを解除するという意味です。

これがHTMLとして認識されると
 今日はとても暑いです
という具合に、太い文字に見えます。

 htmlで書かれたページでは、ほとんどのタグが、挟む単語または文章の前後に対となって(終わるほうには / をつけて)使用されます。

 最後に、画像を呼び出すタグを、画像を使って説明します。
 ここに出ている画像は、以下のようなタグを書くことで、表示されています。
htmlタグの説明画像

<a href="(場所名)" title="htmlタグの説明画像"><img align="right" alt="htmlタグの説明画像" height="180" src="/files/uploads/html_tag_180802a.jpg" width="240" /></a>

 なお、img と a href を合わせて使って、画像を押すとリンク先に飛ぶような書き方をすることもできて重宝します。

≫ 続きを読む

ウェブサイト用語の基礎知識   2018/08/02   mikimarche