OpenOffice.org の紹介 OpenOffice.org は オープンソースで開発されている統合オフィスソフトです 製品 名と同じ名前のコミュニティが開発し 世界中のユーザーが利用するスタンダードなソフ トウェアとなってきています 以下のような特徴を持ちます ワープロや表計算 プレゼンツー

Transcription

1 パソコン実習 OpenOffice.org でホームページを作成しよう 拡張機能の使い方 スタイルの考え方がわかる 特定非営利活動法人 OpenOffice.org 日本ユーザー会 鎌滝雅久 オープンソースカンファレンス 2011 Kagawa 2011 年 2 月 5 日土曜日 会場 サンポートホール高松 ホール棟１ F 市民ギャラリー 受付 セミ ナー タワー棟 4F/5F e-とぴあ かがわ 展示 セミナー 主催 オープンソースカンファレンス実行委員会 共催 e-とぴあ かがわ 情報処理学会四国支部 第 2 回四国オープンソースセミナー 後援 JGN2plus 企画運営 株式会社びぎねっと -1-

2 OpenOffice.org の紹介 OpenOffice.org は オープンソースで開発されている統合オフィスソフトです 製品 名と同じ名前のコミュニティが開発し 世界中のユーザーが利用するスタンダードなソフ トウェアとなってきています 以下のような特徴を持ちます ワープロや表計算 プレゼンツールなどを統合したオフィスソフトです 無料で入手できて 誰でも自由に利用できます マイクロソフトオフィスのファイルを読み書きでき 操作もよく似ています ほかのソフトと文書交換しやすい 標準ファイル形式 OpenDocument を採用(ISO 26300) OpenOffice.org は オープンソースという方針で開発 公開されています 正式名称は OpenOffice.org(オープンオフィス ドット オルグ)です このソフトの開発元も OpenOffice.org という名前です 今回は ホームページの作成に OpenOffice.org を利用し OpenOffice.org のワード プロセッサである Writer の スタイルと書式設定 機能の使いやすさを紹介できればと 思っています また 標準ではけっして豊富とは言えない OpenOffice.org のクリップ アートを 飛躍的に拡充したり インターネットからいつでも欲しい画像を入手できる便 利な拡張機能も紹介します ハンズオンセミナーを受講される方には パソコンを実際に操作していただいて ホームページの作成方法とともに OpenOffice.org の操作方法も学んでいただければと思 います OpenOffice.org を起動する まずは OpenOffice.org を起動します 図 1:① パソコンのデスクトップにある OpenOffice.org 3.3 のショート カットアイコンをダブルクリックする -2-

3 図 2:②OpenOffice.org が起動する -3-

4 付属クリップアートの数を増やす拡張機能の紹介 OpenOffice.org には 拡張機能 が備わっています Microsoft Office では アド インやアドオンと呼ばれているオフィスソフトに便利な機能を付加する外部アプリケー ションが存在します それとほぼ同じものであると思ってください インストールされている拡張機能を確認する お使いの OpenOffice.org にどのような拡張機能がインストールされているか確認しま しょう そのために次の手順で 拡張機能マネージャー を起動します 図 3:①[ツール]-[拡張機能マネージャー]をクリックする -4-

5 図 4:②[拡張機能マネージャー]が起動する みなさんのパソコンの[拡張機能マネージャー]に DSFJ SozaiOOo EuroOffice Online Clipart という拡張機能がインストールされているか ご確認ください コラム 拡張機能について 拡張機能は 専用のリポジトリサイト 配布サイト があり 通常はこのサイトから 利用したいものをダウンロードし [拡張機能マネージャー]を使ってインストールしま す 拡張機能リポジトリサイトの URL は以下となります DSFJ SozaiOOo と EuroOffice Online Clipart はそれぞれ 以下の URL に登 録されています DSFJ SozaiOOo EuroOffice Online Clipart 拡張機能リポジトリサイトには 上記以外のクリップアートの拡張機能もたくさんあ ります 時間のあるときに探してみてください -5-

6 ホームページ作成は OpenOffice.org の HTML 編集機能で それでは 実際にホームページ作成の実習に進みます Windows のスタートメニュー には下図のように HTML を編集するアプリケーションは見当たりません 図 5:スタートメニューに登録された OpenOffice.org のメニュー HTML とは ホームページを作成する言語のことですが OpenOffice.org を使って簡 単なホームページを作成する 範囲では このような言語を意識する必要はありませ ん OpenOffice.org の HTML 編集機能は ほぼ OpenOffice.org のワードプロセッサ である Writer の操作を引き継いでいますから ワープロを利用する感覚でホームページ の作成が行えます OpenOffice.org を起動後の画面で [ファイル]-[新規作成]-[HTML 形式ドキュメント] を選びます -6-

7 図 6:[ファイル]-[新規作成]-[HTML 形式ドキュメント]を 選ぶ OpenOffice.org の画面が 次の図のように変わります これが OpenOffice.org の HTML 形 式 ド キ ュ メ ン ト の 編 集 画 面 で す タ イ ト ル バ ー に は OpenOffice.org Writer/Web と表示されています 図 7:HTML 形式ドキュメントの編集画面 -7-

8 ワープロの 見出し がホームページの 見出し に さっそくホームページ作りにとりかかりましょう 今回は 香川県の観光情報を扱う ホームページにしてみます 以下の図のように 1 行目に 香川県の観光情報 2 行目 に 高松城 3 行目に 讃岐うどん と入力してください IME 漢字変換 がオフの 場合は キーボードの 全角/半角 キーを押してください 図 8:HTML 形式ドキュメントの編集画面 に日本語を入力する 1 行目の 香川県の観光情報 に 見出し 1 のスタイルを 2 行目の 高松城 3 行目の 讃岐うどん には 見出し 2 のスタイルを設定します 手順は以下のようにな ります 図 9:①1 行目の先頭をマウスでクリックしてカーソルのポインタを置 く 図 10:② ツールバーの[スタイルの適用]欄の右側の ボタンをク リックして 見出し 1 をクリックする -8-

9 図 11:③1 行目に 見出し 1 のスタイルが適用される 図 12:④2 行目の先頭をマウスでクリックしてカーソルのポインタを置 く 図 13:⑤ ツールバーの[スタイルと書式設定]ボタンをクリックする -9-

10 図 14:⑥ 表示された[スタイルと書式設定]の 見出し 2 スタイルをダ ブルクリックする 図 15:⑦2 行目に 見出し 2 のスタイルが適用される コラム 見出し スタイルと HTML 言語の関係 見出し 1 スタイルは HTML 言語のタグ<h1> </h1>に対応しています また 見出し 2 スタイルは タグ<h2> </h2>に対応しています このように Writer の 見出しスタイルを設定することで HTML 言語を意識せずに HTML 形式ドキュメント の編集を行うことができます 実習 3 行目に 見出し 2 のスタイルを適用してください

11 改段落と改行の違い Microsoft Word をお使いの方は あまり意識をされないと思いますが ホームページ では 改段落と改行では異なる扱いとなります 具体的には 改段落は HTML 言語のタ グ<p> 改行はタグ<br>が使われます OpenOffice.org の Writer を利用すれば この違いも気にせずホームページ作りが行え ます ここで作成している 香川県の観光情報 を扱うホームページで 次の図のように 高松城 の説明文を入力します 図 16: 高松城 の説明文 赤い線で囲ったツールバーの[編集記号]ボタンをクリックしてください 次の図のよう に 画面に表示された記号が改段落を表しています 図 17:改段落の編集記号

12 高松城 の説明文の 1 行目のどこでも良いので マウスでクリックして カーソル のポインタを置きます その位置で Shift+Enter キーを押してください 次の図のよ うに改行されます 図 18:改行が挿入された 赤い線で囲った記号が 改行の編集記号です Writer では 改段落と改行が区別されることを覚えておいてください また 改行時 にはほぼ 1 行分の行送りが行なわれますが 改段落の場合は 1 行分以上の行送りが行な われている点もわかると思います このように Writer で作成すれば ホームページ上 でも区別される改段落と改行の違いを見た目でも理解できると思います

13 クリップアートを利用してみよう ホームページ作りは 香川県の観光情報にふさわしい図を挿入して完成させましょ う セミナーの最初に紹介したように 図の利用がさらに便利になる拡張機能をインス トールしています ここでは 拡張機能の EuroOffice Online Clipart を使って インターネットから ふさわしい図を挿入してみたいところですが 会場の関係で残念ながら インターネット を使った図の挿入ができません 一応 EuroOffice Online Clipart で図の挿入方法を 説明しておきます ちなみに EuroOffice Online Clipart は Writer 用の拡張機能で す タイトルバーに Writer/Web と表示されている場合は メニューに表示されませ ん EuroOffice Online Clipart を利用する場合は Writer で図を挿入し HTML 形 式ドキュメントの編集画面にコピーすると良いでしょう EuroOffice Online Clipart の使い方は次のとおりです 図 19:①[挿入]メニューの[EuroOffice Clipart Online]をクリックする

14 図 20:②Keyword 欄に挿入したい図の検索ワードを 入力し [Search]ボタンをクリックする 図 21:③ 挿入したい図をクリックする

15 図 22:④ 図が挿入される このように Wikimedia Commons にアップされている図が検索され インターネッ ト上の URL へのリンクとして挿入されます さらに著作権表示も自動で挿入されるの で ホームページで公開する際の著作権に関する手続きも済んだ状態で利用できると考え てよいでしょう デスクトップの画像を挿入する 今回は お使いのパソコンのデスクトップに EuroOffice Online Clipart で検索 した画像を用意しておきました この画像を挿入する方法を紹介します 図 23:① 図を挿入する位置には 前もって改段落を挿入しておく

16 図 24:②[挿入]メニューの[ファイルから]をクリックする 図 25:③[画像の挿入]ダイアログボックスで デスクトップ を選び 高松城の図を選択 [開く]ボタンをクリックする

17 図 26:④ 図が挿入される 実習 デスクトップの讃岐うどんの図を挿入してください

18 作成したページを Web ブラウザでプレビュー 作成中の HTML 形式ドキュメントが Web ブラウザでどのように表示されるか 事前 に確認できるプレビュー機能があります 次のようにプレビューしてください 図 27:[ファイル]メニューの[Web ブラウザでプレビュー]をクリック

19 ページのタイトルを決めて完成 最後にページのタイトルを入力して完成です このページのタイトルは Web ブラウ ザで表示した際 タイトルバーに表示されます 次の手順でページのタイトルを設定 し HTML 形式ドキュメントとして保存します 図 28:①[ファイル]メニューの[プロパティー]をクリックする 図 29:②[プロパティー]ダイアログボックスの 概要 タブのタイトル 欄を設定 [OK]ボタンをクリックする

20 図 30:③[ファイル]メニューの[名前を付けて保存]をクリックする 図 31:④[名前を付けて保存]ダイアログボックスで保存する場所に デ スクトップ を選び ファイル名を指定し ファイルの種類が HTML 形式ドキュメント html となっていることを確認し [保 存]ボタンをクリックする