Go!伊勢崎 コンピュータ(1) [ Home ]




コンピュータ

コンピュータ掲示板 もご利用ください】 更新日:2017/3/7
 このページでは、主にインターネット利用に関するコンピュータの記事を掲載します。
 大項目は下記のメニューの通りです。コンピュータの用語集はウェブ上や本屋さんに溢れているので、このページでは、管理人・丸男の自己体験を踏まえた言葉で説明します。[ 建設用語集 ]共々、どうぞよろしくお願いします。

ホームページ作成

ウェブサイトの活用


ネット接続トラブル、レンタルサーバー

下記はこちら(別ページが開きます)
 ネット接続トラブル、PCの機種やブラウザにより異なるウェブ表示、ブログ作成、レンタルサーバー、レンタルサーバーの移設

下記はこちら(別ページが開きます)
 ウィルス対策、ハードウェア、ファイルの圧縮


■ホームページ作成■

▲ページTopへ
 ホームページの作成手順は非常に大雑把に言えば、たった2つのステップだけです。

手順−1:インターネット閲覧ソフト表示可能な仕様に則ったテキストファイルを作成
手順−2:そのファイルをウェブサーバ送信して保存

 「たった2つだけ」と言われても、これだけじゃ「何のこっちゃ?!」と苦情が届きそうなので、以下に段階的にもう少し詳しく説明します。
 ※上記手順の前に、皆さんが既に回線業者(NTTやyahoo、イーアクセスなど)とプロバイダ(niftyやOCN、So-netなど)と契約を済ませている事が大前提になりますが、このページをご覧いただいていると言う事は、この2つの契約は既に済ませていると考えられますので、これらについての説明は省略します。なお、回線とインタネット接続の2つを1つのプランとして提供している場合もあります。

■ホームページの作成・目次■

(1)ドメインの取得
(2)インターネット閲覧ソフト
(3)ホームページ作成ソフト
(4)HTMLのタグ
(5)スタイルシート
(6)ウェブサーバーに送信(アップロード)・FTP送受信
(7)動画の再生

(1)ドメインの取得

 まず、ホームページを作成する前に、ホームページのアドレスを取得しなければなりません。あるホームページのアドレスを指し示す方式をURL(Uniform Resource Locator)と言い、URLによって示されたホームページのアドレスをドメイン(*)と言います。例えば当サイトのドメインはwww.go-isesaki.comです。ドメインの末尾の種類は現在いくつもあって、代表的なドメインの種類は *.co.jp、*.com、*.jp、*.nam、*.net、*.org、*.info、・・・等ですが、現在まだまだ増殖中です。これらは誰でもが登録できる訳ではなく、例えば *.co.jp などは企業用です。登録費用も種類ごとに異なります。
 無償でもホームページを作成できますが、その場合には提供者があるルールでドメインを決めてしまう場合が多く、自分で独自のドメインを登録したい場合には、公式認定されたドメイン登録機関(これらの指定業者をレジストラと言います)で取得します。公式認定機関をいくつか下記に掲載します。同じ種類でもレジストラによって登録費用が異なっています。実際に、当社があるレジストラに登録した後で、更に安いレジストラも見つかっています(乗り換えはしていませんが)。価格が異なる理由は分かりません。
 (*)ドメインは人間が分かり易いように付けた名前で、実際はコンピュータはIPアドレスと言う4つの数字並びで識別されています。IPアドレスとドメインとを対応付けるシステムをDNS(Domain Name System)と言います。
レジストラの名前 各レジストラのホームページ
お名前.com
【意外と知らないIT用語】ドメインって何? お名前.com
株式会社
インターリンク
gonbei.jp
(株)paperboy&co.
ムームードメイン

(2)インターネット閲覧ソフト

 インターネット閲覧ソフトは「Webブラウザ」とか「WWWブラウザ」とも呼ばれています。一般的に、インターネット利用者はこの存在を意識せずに利用しています。有名なインターネット閲覧ソフトは下記の通りです。
 ・Microsoft Internet Exploler(マイクロソフト社製、Windowsに標準装備)
 ・Safari(アップル社製、無料)
 ・Firefox(Mozilla Japan、無料)
 ・Opera(Opera Software、無料)
 ・Netscape(Netscape 日本、無料)

HTML仕様

 HTML仕様とは、インターネット閲覧ソフトで表示可能な仕様のことです。
 HTMLとは、HyperText Markup Languageの略称です。直訳的には「ハイパーテキストのための、文書に目印を付ける方法を定めた言語」となります。「ハイパー」とは、テキスト内に記述されている内容が普通のテキストを「超えた」意味を持っていると言ったニュアンスです。
 ファイル形式がテキスト型なので、作成、編集が容易で、例えばWindowsのアクセサリソフトNotePad(メモ帳)などでも作成できます。ただ、言語の仕様を熟知している場合には直接にメモ帳等でHTMLファイルを作成できますが、通常はホームページ作成ソフトを利用します。

(3)ホームページ作成ソフト

 ホームページ作成ソフトとしては下記等が一般的です。
 ・IBM Home Page Builder(主に初級者向け、売り上げは7年連続Top)
 ・Dreamweaver
(当初はマクロメディア社、2005年Adobe社が買収。専門業界で圧倒的なシェア)
 ・FrontPage(当初Vermeer Technologies社、現在マイクロソフト社が買収)

CMS(コンテンツ・マネジメント・システム)

 また、巨大なサイトを多数の人が同時に構築するような場合、CMS(コンテンツ・マネジメント・システム)と言ったウェブ作成の統合システムも利用されています。CMSは無償のシステムと商用の有償システムとがあります。無償システムで有名なのは下記の通りですが、設定して利用するにはHTMLの知識のみならずコンピュータ全体の知識も要求されます。
 ・Geeklog(ギークログ) ・XOOPS(ズープス)

(4)HTMLのタグ

 ホームページ文書に付ける目印はタグと呼ばれ、一般的な構造は

<コマンド>〜</コマンド>

 のようにタグで囲みます。
 HTMLファイルを直接編集する場合にはこのタグを覚えることが必修になり、参考書などで、「HTMLタグ辞典」等も販売されています。タグの例をいくつか下記に示します。
 ・文字を太く表示・・・<b>Go!伊勢崎</b> ブラウズ結果→Go!伊勢崎
 ・文字を赤く表示・・・<font color=red>Go!伊勢崎</font> ブラウズ結果→Go!伊勢崎

 ホームページ作成ソフトを使用すればタグは自動生成してくれますので、タグの知識がなくても大丈夫ですが、自動生成機能に過不足がある場合には直接HTMLファイルを編集することになりますので、できればタグの文法は修得したいものです。
 実際、<P>〜</P>や<FONT>〜</FONT>などが必要以上に冗長に生成されたり、コピー&ペーストで文章を複写すると、常に属性までコピーされて、HTMLのソースを直接確認すると不要なタグだらけと言う場合もありますので、HTMLのシェープアップ(*)のためにもできるだけマスターしたいものです。

(5)スタイルシート

 HTMLのタグだけでも十分にホームページを作成することができますが、更に気に入った画面を自由にきめ細かく表現したい場合にはHTMLとは別にスタイルシートで定義します。
 スタイルシートの主流はCSS(Cascading Style Sheets)です。スタイルシートはHTMLファイルの中に記述しても、また別個のファイルで定義しても構いません。ホームページのソースは閲覧者に自由に読み取られてしまいますので(ブラウザのメニュー<表示>-<ソース>で表示されます)、自分があれこれ工夫したスタイルシートを他者に利用されたくない場合や、複数のページに共通のスタイルを設定したい場合等は、別個のファイルにすれば対応できます。

 (*)話が細かくなりますが、WEBブラウザは起動時にHTMLファイルを読み込んで翻訳しながら画面に表示しますので、表示に影響しない無意味な文が少ない方が表示も速くなるし、ディスク容量等のリソースの節約にもなりますので、常に最適でコンパクトな内容にしたいものです(更新が激しいサイトでは表示に影響しないとなると、ついつい手を抜いてしまいますが)。

(6)ウェブサーバーに送信(アップロード)・FTP送受信

 上記のようにして作成したHTMLファイルはウェブサーバーに送信(アップロード)しないと他者が閲覧できません。ウェブサーバに送信するには、FTP(File Transfer Protocol:ファイル・トランスファー・プロトコル)で行います。
 ホームページを習い始めた頃、自分のパソコン(クライアント側)で仕上げたページをウェブサーバに送信するのを忘れているのに、「ちっとも直した通りに表示されない」と悩む場合が良くあります。また送信した後も、通常は前の表示内容がキャッシュメモリに残っていますので、更新(リロード)しないと最新画面になりません。リロードはインターネットエクスプローラの場合、F5キーにも設定されています。

 FTPクライアントソフトはホームページ作成ソフトには標準で装備されていますが、単独では下記のような無償ソフトもあります。
 ・FFFTP(入手はこちら)


(7)動画の再生

 最初にお断りすると、動画の再生に付いてはその技術的な事柄全体をきちんと整理して説明することはできません。実体験から得た少ない知識、しかも悪戦苦闘の経緯をお伝えします。

 ■動画の撮影とファイル形式
 私のデジカメ(Panasonic LUMIX)は動画撮影機能が付いていて、シャッターを押し続けるだけで動画が撮れます。撮った動画ファイルはQuick Timeのファイル形式であるmovファイルで出力されます。記録画素数は320×240で固定ですが、動画コマ数は30fpsと10fpsの2種類を選択できます。30fpsの方がスムースな動画が撮れますが、ファイルサイズが大きくなるので、現在は10fpsで撮っています。
 シャッターを押し続けるだけなので撮影は至って簡単ですが、残念なのは、動画撮影中にズームを変更できないので、距離感に変化のある動画を撮るには自分で移動するしかなく、歩き回れない場所で撮影する時にはカメラをグルリと周囲に向ける等の工夫をしています。

 ■まずは簡単な再生方法
 このようにして撮影した動画ファイルをそのままウェブサーバにアップロードし、紹介ページのHTMLにリンク用タグを記述するだけでも再生することができます。
 その方法や使用するコマンドにはいくつかありますが、私はEMBEDタグを使用しました。
 <EMBED src="###/###/###.mov" width="320" height="240" panel="0" repeat="true"
 save="false" volume="70" text="###" autostart="true" loop="false">
 ※EMBED内の各コマンドの詳細は省略しますが、「EMBEDタグ」でサイト検索すればたくさん見つかります。

 ■ダウンロード後の再生
 上記の方法は通常はQuick Timeで再生しますが、画像ファイルを全てダウンロードしてから再生しますので、閲覧者のPCの環境(回線の伝送速度、CPUやメモリのスペック、グラフィックエンジンの有無、インストールされている動画用ソフトの種類と設定内容・・・)によって差があり、随分と待たされたり再生できなかったする場合もあり、余り歓迎されません。
 当サイトの常連さんに尋ねても、「全く問題なく軽快に再生される」と言う方と、「いつになっても表示されない」と言う方とおりますので、汎用性のある方法ではないようです。

 ■ストリーミング再生
 ダウンロード後に再生する方法に対して、ストリーミング再生という方法があります。これは少しずつダウンロードしながら再生を始める方法で、閲覧者が待たされることなく「取りあえず」再生が始まるので、現在の多くの動画専用サイトはこの方法を採用しているようです。「取りあえず」と言うのは、1回の読み込み(これをバッファと言います)時間に対してその再生の方が早く、次の読み込みまでにはやはり少し待たされるからです。

 ■ストリーミングサーバ
ストリーミング再生はウェブサーバからの配信も行えますが、サーバや回線への負担が大きいので、通常は専用のサーバ(これをストリーミングサーバと言います)を用います。当「Go!伊勢崎」の動画は残念ながらウェブサーバから配信しています。
「何でストリーミングサーバにしないの?」と問われると答は簡単で、ハードや専用ソフトの費用がウェブサーバと別個にかかるからなんです。

 ■動画再生プレーヤーソフトと動画ファイル形式
ストリーミングサーバを利用した配信をしなくても、多くの人に軽快に再生してもらう方法がないかとあれこれと調べ、悪戦苦闘したのがファイル形式と再生プレーヤソフトとの関連です。
現在主流とされている再生プレーヤーソフトには
MediaPlayer、QuickTime、RealPlayer、Flash Video、iTunes等があります。
基本機能はどれも無料でダウンロードできます。

そして動画ファイル形式には下記のような形式があります。
オーディオ:mp3,mp2,cda,wav,wma,aac,m4a,m4b,mp4,acp,m4p,m4a,mov,aif,aiff,au,acp
ビデオ:vob,mpeg,mpe,mpg,avi,divx,wmv,mov,qt,swf,flv

自由競争の世界なのでアップル社やマイクロソフト社を中心に次々に新しい環境を提供して来るのですが、これだけあるとユーザの立場からすると追い付いて行くのが精一杯です。

 ■コーデック
動画の再生には、ファイル形式と別にコーデックと言う技術も重要です。コーデックとはデータのエンコード(符号化)とデコード(復号)を双方向に行う技術で、既にお馴染みのファイルの圧縮/解凍等もその技術の1つです。(codec:coder/decoderからのネーミングです)
 同じ動画ファイルでもコーデックが異なると再生しないなどの現象も起こります。

ここまで読み進めて来た人も相当にウンザリして来ていることと思いますが、あと一歩です。

 ■動画ファイルの変換
上記のような事をあれこれ調べて、結果的にどのような方法が最適かと言う結論を得ました。それは
@ネットユーザの多くはWindowsのPCを使用している。
AWindowsには標準で Media Playerが実装されている。
BMedia Player の標準ファイル形式はwmvかwm。
 これ以外の形式(asf,avi,mpeg,mpgなど)も再生可能だがマイクロソフト以外のコーデックで作成されている場合もあるので、無難なwmvかwmにする。
C従ってデジカメで撮影したmovファイルをwmvファイルに変換すれば良い。
 試しにいくつかのwmv動画でテストしたところ、Youtube等と変わらぬような雰囲気で、軽快に再生されました。

・・・とここまでに至って探したのがフリーソフトの動画ファイル変換ソフト。フリーとは言え、機能不足や怪しそうなソフトは避けて、最終的に選んだのが「Free Video Converter」です。
 ※このソフトの前に使用したフリーソフも機能や操作性に十分満足していたのですが、動画の最初(1分程度)、画像の中央に宣伝のコメントが入ってしまい、これを削除するには60ドルの支払いが必要だったので、他のソフトを探したところ、上記のソフトに到達しました。

 そして、最終作業として、変換後のwmvファイルをウェブサーバにアップロードし、EMBEDタグ内のファイル名を
 <EMBED src="###/###/###.mov" ・・・・・>から
 <EMBED src="###/###/###.mmv" ・・・・・>に変更し終了です。

 と、以上のような顛末記があって現在の動画配信に至りました。取りあえずその手順も落ち着いて一段落していますが、日進月歩の世界なので、またまた見直しを迫られる時が来ると思います。その時には、またこの記事も更新したいとおもいます。
ホームページの作成も承っております。詳しくはこちら、あるいはお問い合わせください。

■ウェブサーバに置くソフトの作成■

▲ページTopへ
 HTMLやCSSを使用したウェブページは、表示時にそのコードに従って静的に処理するだけなので、表示後、ユーザ(クライアント側)が入力したデータを読み込んで対話型処理を行いたい場合などには限界があります。
 簡単な機能の場合にはHTMLコードの中にJava Scriptコード(*)を組み込んで対応することもできますが、ちょっと複雑な処理を行いたい場合にはウェブサーバ側にソフトを組み込んでおき、このプログラムとブラウザとの間でやり取りを行います。

 この流れを整理しますと、下記のようになります。

(1)ユーザがブラウズ(表示)中の画面に何かを入力し、データ送信ボタンをクリック。
通常は送信ボタンには「計算」とか「確認」、「登録」等、ユーザが次の操作を理解しやすい言葉を表示しておきます。

(2)ウェブサーバ側にあるソフトはユーザからのデータを受信し、その内容を解析し、次の処理をHTMLやCSSコードなどに置換してクライアント側に返します。

(3)クライアント側でブラウザがその内容を表示します。

 以下、上記処理の繰り返しになります。
 (*)JavaScriptの場合、画面を移動せずにユーザとの対話処理を行える利点がありますが、ソースコードをブラウザの<ソースの表示>で簡単に読み取られてしまうこと、また簡易言語的な位置付けに発展性を感じない等々の理由で、私は余り積極的には使用していません。

 ウェブ側に置くソフトを組むには下記のようなプログラム言語を使用します。
 ●Java ●Perl ●PHP ●.NET(ドットネット)

 当「Go!伊勢崎」では下記のページをPHPで作成してあります。
 ●参加コーナーのシニアチェック
 ●参加コーナーの伊勢崎テスト
 ●掲示板集のページと指定期間内の各掲示板の表示
 ●サイトマップ
 ●顔で遊ぶ
 ●写真集閲覧

 また、下記のページはPerlを使用したフリーソフトをカスタマイズして利用しています。
 ●各掲示板
 ●伊勢崎アンケート

 Javaや.NETは使いこなしていないので総括的な事は語れませんが、JavaやPHP、PerlはどれもCやC++言語に似ています。細かい理由は省略しますが、私はPHPとPerlでは主にPHPを使用しています。
 どんな言語を使っても、クライアント側からのデータ受信部分と、その処理結果をブラウザへ渡すためにHTMLやCSSコードを生成すると言う基本を掴んでしまえば、Windows上のソフトを作成しているのと同様な感覚で作成できます。ライブラリの数もC言語同様な物が用意されていて、ファンクションの名前なども非常に似ています。 
■当サイトに組み込んでいる上記ソフトに付きましては、プログラムとデータ部分、また環境設定的な部分は分離していますので、他のサイトへのカスタマイズも容易です。ウェブソフトの作成も承っております。詳しくはこちら、あるいはお問い合わせください。


■本めくり■

(お金をかけずに電子書籍を自費出版したい方のために)

掲載日:2015/1/9 ▲ページTopへ
 先日、知人のHさんから、電子書籍のことを尋ねられました。電子書籍と言えばアマゾンキンドル(Amazon Kindle)が思い浮かび、所有している知り合いに現物を見せてもらったことなどもありますが、Hさんの話は、どうやら利用者側の話ではなく、出版する側の話でした。詳細はお伝えできませんが、ある出版物を関係者に渡せればいいだけとのことで、電子書籍に関心を持ったようです。
 電子書籍を調べると、まだまだ流動的ながら、将来性に期待して既に巨大な業種・業態が生まれています。でも、結局は文章や絵、音声の表示・再生方法と、料金支払いや権利(売る側、読む側、著作権者)の管理をいかにユーザフレンドリーにするかと言うことで、それはつまるところ、ウェブプログラミング技術に依存することになります。
 私も、その場でHさんに、「出版物の著作権収益を期待せず、関係者に渡したいだけならば、安からぬ費用がかかる商用サイトでなく、自分でウェブサイトを起こせばいいんじゃないですか」とアドバイスしたのですが、言った責任上、自身で電子書籍風のウェブ管理するにはどんな環境を利用できるのだろうかと調べてみました。

 そこで到達したのがフリーソフトの「turn.js」(→http://www.turnjs.com/)。JavaScript言語で開発された本めくりのフリーソースコードです。詳細は省略しますが、当サイトの「花と緑・伊勢崎市の紅葉」のページを使用して、サンプルを作ってみました。確認したブラウザはインターネット 11.0 と Firefox 34.0.5です。
【操作要点】
●ページの四隅をクリック→ページめくり
●ページの四隅をクリック後、めくれた部分をつまんでドラッグ→ページを部分的に開いたり閉じたりできます。
●ページの左右端にマウス移動→グレイのタグが表示されますので、クリックするとページがめくれます。
●表示ページの任意位置でクリック→クリックの度に表示内容が拡大/縮小されます。
●拡大表示中に任意位置をドラッグ→拡大表示中の内容を任意に移動できます。
※今回、簡易的に制作しましたので、鮮明度は高くありません
こちらで実際にご覧になれます。
 私の友人・知人・親戚の中にも、自叙伝や趣味、エッセイ、旅行記、論文などを紙媒体の書籍として自費出版している方が少なからずいます。記念に一冊いただいてあって、ざっと10冊くらいはあるでしょうか。これらの物理媒体の書籍の多くは、そのまま眠ってしまいますが、ウェブならば、サーバーが残される限り、いつか誰かが見てくれる可能性があります。また、著者本人も、印刷物を渡さずとも、URLを連絡するだけで他者に渡すことができます。
 自身の著作物をウェブ上で本風に表示できる世界、何かの機会にお試しあれ。(2015/1/9 記)



Site view counter since 2006/9/17

▲ページTopへ