<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
-<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
+<!-- アイコン -->
<link rel="shortcut icon" href="favicon.ico">
-<link rel="stylesheet" type="text/css" media="print" href="/buildmydist-2/style/print.css">
+
+<!-- フォント -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&subset=japanese" rel="stylesheet">
+<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+<!-- Twitter -->
+<meta name="twitter:card" content="summary">
+<meta name="twitter:site" content="Hayao0819">
+<meta name="twitter:title" content="<?php echo "${title}" ?> | オリジナルLinuxディストリを自作しよう2">
+<meta name="twitter:description" content="<?php echo "${description}" ?>">
+<!-- <meta name="twitter:image" content="画像URL“> -->
+
+
+<!-- 検索エンジン用設定 -->
+<meta content="<?php echo "${description}" ?>" name="description">
+<meta property="og:title" content="<?php echo "${title}" ?>">
+<meta property="og:description" content="<?php echo "${description}" ?>">
+<meta property="og:type" content="article">
+<meta property="og:url" content="<?php echo (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
+<meta property="og:site_name" content="オリジナルLinuxディストリを自作しよう2">
+<meta property="og:locale" content="ja_JP">
+<!-- <meta property="og:image" content="画像URL"> -->
+
+
<!-- ここからCSS定義 -->
<link href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="/buildmydist-2/style/common.css">
<link rel="stylesheet" href="/buildmydist-2/style/var.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css">
<link rel="stylesheet" href="/buildmydist-2/style/sp.css" media="screen and (max-width: 799px)">
<link rel="stylesheet" href="/buildmydist-2/style/pc.css" media="screen and (min-width: 800px)">
+<link rel="stylesheet" type="text/css" media="print" href="/buildmydist-2/style/print.css">
<!-- ページ設定をJSに渡す -->
<script>
<span id="relation_page">
<?php
$relation = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/pages/$distro/relation.php";
- //console_log($relation);
-
if(file_exists($relation)){
echo "<h2>関連ページ</h2>";
include($relation);
}
?>
+ <!--
+ <h2>リンクまとめ</h2>
+ <ul id="link-list">
+ <script>
+ Array.from(document.getElementsByTagName("main")[0].getElementsByTagName("a")).forEach(source =>{
+ var li = document.createElement("li");
+ var element = source.cloneNode(true);
+ li.appendChild(element);
+ document.getElementById("link-list").appendChild(li);
+ li = undefined;
+ });
+ </script>
+ </ul>
+ -->
</span>
- <h2>サイト内検索</h2>
- <p>ここで検索できるようにする</p>
+ <span id="link-collection">
+ <h2>いろいろリンク集</h2>
+ <h3>Fascode Network</h3>
+ <ul>
+ <li><a href="https://fascode.net/">公式サイト</a></li>
+ <li><a href="https://blog.fascode.net/">公式ブログ</a></li>
+ <li><a href="https://twitter.com/Fascode_JP">Twitter</a></li>
+ <li><a href="https://github.com/FascodeNet/">GitHub</a></li>
+ </ul>
+ <h3>山田ハヤオ</h3>
+ <ul>
+ <li><a href="https://twitter.com/Hayao0819/">Twitter</a></li>
+ <li><a href="https://github.com/Hayao0819/">GitHub</a></li>
+ <li><a href="https://www.instagram.com/hayao0819/">Instagram</a></li>
+ </ul>
+ </span>
- <h2>いろいろリンク集</h2>
- <ul>
- <li>ふぁすこーど</li>
- <li>ぎっとはぶ</li>
- <li>ランダムで表示</li>
- </ul>
+ <span id="about-hayao">
+ <h2>作者について</h2>
+ <p id="hayao-icon"><img src="/buildmydist-2/images/hayao.jpg" alt=""></p>
+ <p>
+ <a href="https://twitter.com/yamad_linuxer">山D</a>と<a href="https://twitter.com/0_a_e">オレンジ</a>に誘われてSereneTeamを設立。
+ その後、なんやかんやあってFascode Networkに改称し、現在はAlter Linuxと周辺のコマンドを主に担当している。
+ まともに触れる言語が1つも無いのが最近の悩み。チョコレートとからあげが大好き。暇人...といいたいけど最近はかなり忙しい。
+ </p>
+ </span>
</aside>
<p>複数のパソコンに同じOSを入れて設定を繰り返すといった際に使うことができます。</p>
<p>また、自分がカスタマイズしたものを誰かに使ってもらいたい！という人はネット上に公開することもできます。</p>
- <h2>このサイトができるまでの経緯</h2>
- <p>もともと、ネットで知り合った友人とUbuntu派生のディストリを開発しようと情報を収集したのが始まりでした。</p>
- <p>しかし、日本語の情報はほぼ皆無。少しだけある情報も古くて現在は使えない場合がほとんどでした。</p>
- <p>そこで様々な情報を集め、足りないものは独自で開発し、誰でもかんたんに作れるようにしようというのがこのサイトの目的です。</p>
- <p><a href="http://localhost/buildmydist/index.html">【2019年版】Ubuntu系のOSを自作しよう</a>はこのサイトの前身です。既に古くなっており、使えなくなっている情報も多いです。</p>
- <p>Ubuntuだけではなく、より多くの情報をまとめやすくするためにサイトを書き直しました。</p>
- <p>旧サイトにかかれている内容はかなり古くなっていますので注意してください。（更新予定はありません）</p>
-
<h2>まずは何をするべきか</h2>
<p>「Ubuntu系のOSを自作しよう」（旧サイト）の公開後、とても多くの問い合わせをTwitterのDMにいただきました。</p>
<p>当時はまだ中2で時間もたくさんあったので1つ1つ対応を行っていましたが、現在は多忙により難しくなっています。</p>
<p>また、独自のソフトウェアを追加したい場合や、アップデートの仕組み（パッケージマネージャ）を利用しようとする場合は、シェルスクリプトやPython、Cの知識なども必要になってきます。</p>
<p>いきなり開発を始める前に必要なことを十分に調べ、構想が実現可能であるかどうかを検証する必要があります。</p>
+ <h2>準備編</h2>
+ <p style="text-align: center;">
+ <a href="/buildmydist-2/pages/common">まずはここから</a>
+ </p>
+
+ <h2>このサイトができるまでの経緯</h2>
+ <p>もともと、ネットで知り合った友人とUbuntu派生のディストリを開発しようと情報を収集したのが始まりでした。</p>
+ <p>しかし、日本語の情報はほぼ皆無。少しだけある情報も古くて現在は使えない場合がほとんどでした。</p>
+ <p>そこで様々な情報を集め、足りないものは独自で開発し、誰でもかんたんに作れるようにしようというのがこのサイトの目的です。</p>
+ <p><a href="http://localhost/buildmydist/index.html">【2019年版】Ubuntu系のOSを自作しよう</a>はこのサイトの前身です。既に古くなっており、使えなくなっている情報も多いです。</p>
+ <p>Ubuntuだけではなく、より多くの情報をまとめやすくするためにサイトを書き直しました。</p>
+ <p>旧サイトにかかれている内容はかなり古くなっていますので注意してください。（更新予定はありません）</p>
+
<h2>筆者について</h2>
<p>しがない田舎の高校生です。偉そうなことを言っていますが何もできません。<a href="https://twitter.com/Hayao0819">Twitter</a>をフォローしてくれると喜びます。</p>
<p>Fascode Networkに所属してAlter Linuxを開発しています。最近はインフラとフロントエンドにも手を出したいと考えていたり。</p>
<h2>誤字脱字を見つけたら</h2>
<p>筆者に知らせていただくか、誤字修正のプルリクエストを送ってください。</p>
+ <p>（スタイルとか全体のコードの修正とかもどしどしお願いします...なんせウェブ系言語は苦手なもんで）</p>
<p>ソースコードは<a href="https://github.com/hayao0819/hayao.fascode.net" target="_blank">GitHub</a>で公開されています。</p>
</main>
--- /dev/null
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+
+ <?php
+ // ページ設定
+ $title = "成分表";
+ $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+ //$distro = "osname";
+
+ // 共通ファイルを読み込み
+ $domain = $_SERVER['HTTP_HOST'];
+ include("${commonhtml}/head.php");
+ ?>
+
+</head>
+<body>
+ <?php include("${commonhtml}/beforemain.php"); ?>
+
+ <main>
+ <h2>成分表</h2>
+ <p>このサイトは主に以下の成分で構成されています。</p>
+ <p>また、Arch Linux上で製造しています。アレルギーをお持ちの方はご注意ください。</p>
+ <h3>HTML</h3>
+ <p>本文を書くのに使用しています。</p>
+ <h3>PHP</h3>
+ <p>ヘッダーやフッター、サイドバーなどを共通化するために使用しています。</p>
+ <h3>JavaScript</h3>
+ <p>レスポンシブデザインを実現し、動的なことをするために使ってます。（たぶん全部CSSで代用できる）</p>
+ <h3>魔法少女まどか☆マギカ （外伝 マギアレコード）</h3>
+ <p>モチベの維持と癒やし、サントラを作業用BGMに使用。学校で疲れた後にマギレコやるのが趣味。杏ゆまは天使。</p>
+ <h3>青春ブタ野郎シリーズ</h3>
+ <p>モチベの維持。麻衣さんはかわいい。</p>
+ <h3>Twitter</h3>
+ <p>これがないと生きていけない。生活必需品。全人類がやるべき。</p>
+ <h3>ゆるキャン△</h3>
+ <p>松ぼっくりとか木の枝の声が好き。現在（2021年2月20日）2期なうなのでDアニメで本編見てからニコニコでコメントを見るのが好き。しまりんがかわいい。拝め。</p>
+ <h3>なおこさん</h3>
+ <p>PHPとCSSにものすごく強い人。めっちゃアドバイスもらってる。<a href="https://twitter.com/naoko1010hh">Twitter</a>は閲覧注意。</p>
+ </main>
+
+ <script>
+ window.addEventListener("load", function(){
+ document.getElementsByTagName("footer")[0].addEventListener("click", function(){
+ document.location.href = "https://yurucamp.jp/";
+ })
+ })
+ </script>
+ <?php include("${commonhtml}/aftermain.php"); ?>
+</body>
+</html>
<p>個人で自分だけで使う場合はそこまで重要でもないですが、ネット上で配布などをする場合にはとても重要になります</p>
<p>詳細を下でいろいろと見ていきます。</p>
- <h3>仮想マシンと総合開発環境を動かせる程度の性能のあるマシン</h3>
+ <h4>仮想マシンと総合開発環境を動かせる程度の性能のあるマシン</h4>
<p>ディストリのビルドは全てスクリプトで自動化して行いますが、スクリプトは主に以下のことを行っています</p>
<p>（Ubuntuだけはスクリプトの内容は大きく異なります。スクリプトがやってくれないことがあるのでそれを自分で行います。）</p>
<ol>
<p>筆者のCPUはSandy世代でとても高性能とは言えないので山D（Fascodeのえらいひと）にサーバを借りてビルドしています</p>
<p>最低でも3GB以上のパッケージをダウンロードし、tarの圧縮を快適に行えるPCを用意しましょう</p>
<p>また、（Ubuntuなどでは必須になりますが）OSを実行する仮想環境も必要になってきます</p>
- <p>仮想環境については<a href="/buildmydist-2/pages/misc/virtual.php">こちら</a>を参照してください</p>
+ <p>仮想環境については<a href="/buildmydist-2/pages/misc/virtual/">こちら</a>を参照してください</p>
- <h3>最低でも500GBの容量のディスク</h3>
+ <h4>最低でも500GBの容量のディスク</h4>
<p>先程のビルドの要約を見るとわかりますが、主な処理はパッケージのインストールとコマンド実行です。</p>
<p>ダウンロードしたパッケージをキャッシュしたり、作業ディレクトリに展開したりとかなり大量のディスクを使用します。</p>
<p>さらに、ビルドしたisoは約2~3GBもあります。過去のバージョンなども保存っしておくと合っというまにHDDを食ってしまいます</p>
- <h3>仮想化ソフトウェア（Qemu、VirtualBox、VMware Workstation Player）</h3>
+ <h4>仮想化ソフトウェア（Qemu、VirtualBox、VMware Workstation Player）</h4>
<p>ビルドしたOSは基本的に仮想環境でテストを繰り返すことになります。</p>
<p>複数の仮想環境でテストをして、環境依存の問題などを確認するために複数の仮想環境でテストを行います。</p>
<p>全て無料で利用できるソフトウェアで、様々な用途に利用できるのでインストールしておきましょう。</p>
- <p>詳しくは<a href="/buildmydist-2/pages/misc/virtual.php">こちら</a>を参照してください</p>
+ <p>詳しくは<a href="/buildmydist-2/pages/misc/virtual/">こちら</a>を参照してください</p>
- <h3>中学生程度の英語を読める程度の能力</h3>
+ <h4>中学生程度の英語を読める</h4>
<p>Linuxのエラーはほぼ全て英語で書かれています。そのため英語が読めないと何も出来ません</p>
<p>といっても、<code>No such file or directory</code>というようなかんたんな英語しか無いのでそこまで心配する必要はありません。どうしても英語が苦手という人はGoogle翻訳とDeeplを使うとかなり正確な翻訳を得ることが出来ます。</p>
-
+ <h4>コマンドを打ったりログを見たりできる</h4>
+ <p>ビルドスクリプトの実行や、デバッグなどはほとんどがCLI上での作業になります。（GUIが起動しない場合などで特に）</p>
+ <p>また、実機テストで起動しなかった場合やインストールに失敗した場合などのレスキュー作業もCLIになります。</p>
+ <p>まだLinuxになれきってない人は少々難しいかもしれません</p>
+ <p><code>ls</code>や<code>cd</code>、<code>cut</code>や<code>less</code>、<code>grep</code>などは覚えておきましょう</p>
+ <p>また、<code>systemctl</code>と<code>journald</code>もなれておくと良いでしょう</p>
+
+ <h4>シェルスクリプトで順次処理を実行できる</h4>
+ <p>特にArch Linuxやfedoraをベースとする場合に重要です。先程の構築の手順を見るとわかりますが、パッケージのインストール後にシステムの設定を行います。</p>
+ <p>このシステムの設定は全てシェルコマンドを実行して行われます。変数を扱える程度のシェルスクリプトの知識が必要になってきます。</p>
+
+ <h4>このサイトの内容を理解できる</h4>
+ <p>一番重要です。</p>
+
+ <h3>必要なソフトウェアのインストール</h3>
+ <p>最低限でもテキストエディタと仮想マシンが必要になります。</p>
+ <p>また、FedoraやArch、Alterをベースに開発を行う場合には実機で動作するLinuxが必要になります。</p>
+ <p>（よっぽどマシンスペックに自信があるのなら仮想マシンでもいいですが、性能が低いとビルドにものすごく時間がかかります）</p>
+ <p>Fedoraをベースに開発をするのなら実機のFedora、ArchやAlterで開発をするのなら実機のArchやAlter が必要になります。</p>
+ <p>（正確にはArch LinuxさえあればFedoraもカバーできるのですが、環境構築が大変なので割愛します）</p>
+ <br>
+ <p>おすすめのテキストエディタエディタはVisual Studio Codeですが、下手すると戦争になりかねないので自分の好きなものを使いましょう。間違ってもnotepad.exeはやめましょう。</p>
+ <p>（このサイトを読んでる人ならこれくらいの環境構築はかんたんだと思うので細かい説明は割愛します）</p>
+ <p>ベースとなるディストリによって準備するものも異なるので、それは各ページで解説を行います。</p>
+
+ <h3>ベースになるディストリを決めよう</h3>
+ <p>イチからlinuxディストリビューションを構築するのはものすごく大変です。</p>
+ <p>（Linux from Scratchというプロジェクトがあるので、「俺はどうしても1からがええんじゃ！」と言う方はそちらを参考にしてください。）</p>
+ <p>そのため、このサイトでは様々な主要ディストリを改造する形で開発を行っていこうと思います。</p>
+ <p>世の中には数え切れないほどのディストリがありますが、だいたい以下に分類することができます。</p>
+ <p>（厳密にはLinuxではないUnix系は省略します。また、あくまで大雑にですので細かい部分は異なります。）</p>
+ <ul>
+ <li>
+ <b>Debian系</b>
+ <ul>
+ <li>
+ Ubuntu系
+ <ul>
+ <li>Xubuntu</li>
+ <li>Lubuntu</li>
+ <li>Kubuntu</li>
+ <li>Serene Linux</li>
+ </ul>
+ </li>
+ <li>Kali Linux</li>
+ <li>Kona Linux</li>
+ </ul>
+ </li>
+ <li>
+ <b>RHEL系</b>
+ <ul>
+ <li>Redhat Enterprise Linux</li>
+ <li>Cent OS</li>
+ <li>Fedora</li>
+ <li>RedStar OS</li>
+ </ul>
+ </li>
+ <li>
+ <b>Arch Linux系</b>
+ <ul>
+ <li>Black Arch Linux</li>
+ <li>Manjaro Linux</li>
+ <li>Arch Linux ARM</li>
+ <li>Artix Linux</li>
+ <li>Alter Linux</li>
+ </ul>
+ </li>
+ <li>Slack Ware系</li>
+ <li>Gentoo Linux系</li>
+ <li>その他いろいろ（多いので割愛）</li>
+ </ul>
+ <p>主な違いはパッケージマネージャとリポジトリです。Arch Linux系はpacmanを採用しており、Debian系はaptになっています。</p>
+ <p>Arch Linuxは最新だけどちょっと不安定、Manjaroはバージョンは古いけど安定したパッケージ、Ubuntuは最適化されて安定したパッケージ...とそれぞれに特徴が有ります。</p>
+ <p>「とりあえず試しに作ってみたい」という人はUbuntuをおすすめしますが、いろいろ問題があります。（以下で詳しく説明します。）</p>
+ <p>そういったそれぞれの特徴を考えてどのディストリをベースにするかを決定しましょう。</p>
+ <p>また、このサイトで解説しているのはハヤオが開発したことがあるものだけです。GentooやSlackware、BSDなどｎ知識はほぼ皆無なのでこのサイトでは解説しません。</p>
+
+ <h4>Ubuntu系の問題点</h4>
+ <p>FedoraやArchは全てテキストベースのソースコードで管理することができます（すなわちGitなどのバージョン管理システムを使えます）</p>
+ <p>しかし、Ubuntu系だけは「実際に仮想環境上に構築されたものをisoファイルに直接圧縮する」というものになっています。</p>
+ <p>そのためバージョン管理がしにくく、また内部の最適化がしにくいという問題があります。長期的な開発には向いていないので注意してください。</p>
+
+
+
+
+ <h2>おわり</h2>
+ <p>ここまでお疲れ様でした。ディストリ開発を始める最初のステップはこれで終わりです。</p>
+ <p>それそれのディストリのページで次の手順に進みましょう。</p>
</main>
-<a href="http://localhost/buildmydist-2/">トップに戻る</a>
\ No newline at end of file
+<ul>
+ <li><a href="/buildmydist-2/">トップに戻る</a></li>
+ <li><a href="/buildmydist-2/pages/misc/virtual/">仮想マシンについて</a></li>
+</ul>
<main>
<h2>Fedora 33 について</h2>
- <p>Fascode Networkで開発されているSerene Linuxは現在はFedoraベースで開発されています</p>
+ <p>fedoraはRHELから派生して開発されているディストリビューションです。</p>
+ <p>RHELのテストのような扱いになっており、Fedoraで新機能がテストされ、安定したものがRHELに取り込まれるという形になっています。</p>
+ <p>Fascode Networkで開発されているSerene Linuxは現在はFedoraベースで開発されています。</p>
+
+ <h2>Fedoraベースでディストリを開発するには</h2>
+ <p>Fedora 33をベースに開発する最もかんたんな方法は「LFBS」を使用することです。</p>
+ <p>LFBSは、Archisoに影響を受けてFascode Networkで開発を行っているスクリプト群の総称です。</p>
+ <p>（開発リーダーは<a href="https://twitter.com/kokkiemouse">kokkiemouse</a> で、ハヤオもちょこちょこ開発に参加しています）</p>
+ <p>LFBSを利用するとかんたんに派生ディストリを構築することができます。</p>
+
</main>
<?php include("${commonhtml}/aftermain.php"); ?>
<?php
// ページ設定
- $title = "ã\81\9dã\81®ä»\96ã\81®é\9b\91å¦";
+ $title = "ã\83\87ã\82£ã\82¹ã\83\97ã\83¬ã\82¤ã\83\9eã\83\8dã\83¼ã\82¸ã\83£";
$commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
$distro = "misc";
+ $description = "";
// 共通ファイルを読み込み
$domain = $_SERVER['HTTP_HOST'];
<?php include("${commonhtml}/beforemain.php"); ?>
<main>
- <h2>このページは何？</h2>
- <p>Linuxのカスタマイズをする上で必要な情報をまとめています。</p>
- <p>ようは開発をする上で便利なリンク集です。</p>
+ <h2>ほげほげ</h2>
+ <p>ふごふご！ほげぇ！？ふご！ふごふご！！コケェッ！！！</p>
</main>
<?php include("${commonhtml}/aftermain.php"); ?>
<h2>このページは何？</h2>
<p>Linuxのカスタマイズをする上で必要な情報をまとめています。</p>
<p>ようは開発をする上で便利なリンク集です。</p>
+
+ <ul>
+ <li><a href="./virtual/index.php">仮想マシンについて</a></li>
+ </ul>
</main>
<?php include("${commonhtml}/aftermain.php"); ?>
--- /dev/null
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+
+ <?php
+ // ページ設定
+ $title = "仮想マシンについて";
+ $commonhtml = "${_SERVER['DOCUMENT_ROOT']}/buildmydist-2/commonhtml";
+ $distro = "misc";
+
+ // 共通ファイルを読み込み
+ $domain = $_SERVER['HTTP_HOST'];
+ include("${commonhtml}/head.php");
+ ?>
+
+</head>
+<body>
+ <?php include("${commonhtml}/beforemain.php"); ?>
+
+ <main>
+ <h2>仮想マシンについて</h2>
+ <h3>仮想マシンとは</h3>
+ <p>仮想マシンは実際のPCの上に別のPCを仮想的に作成するソフトウェアです。実際のPCを用意するより手軽に利用でき、構成の変更やOSのテストが容易に行えます。</p>
+ <p>ここでは主によく使用されている仮想化ソフトウェアとその基本的な用語について解説します。</p>
+
+ <h3>用語解説と仮想化ソフトウェアの種類</h3>
+
+ <h4>仮想化</h4>
+ <p>仮想マシンの中でOSを実行したり、実機で動いていたものを仮想マシンに移すことを仮想化と言います。</p>
+ <p>（最近は仮想マシンのことを仮想化とも言ったりするので結構そこらへんは曖昧になっているかもしれません）</p>
+
+ <h4>ホスト、ホストOS</h4>
+ <p>先程、仮想マシンは「実際のPCの上に別のPCを仮想的に作成する」といいました。その「実際のPC」のことを「ホスト」と呼びます。</p>
+ <p>また、そのホストで動いているOSのことを「ホストOS」と呼びます。</p>
+
+ <h4>ゲスト、ゲストOS</h4>
+ <p>ホストの反対がゲストになります。つまり仮想環境で動いているほうのことを指します。</p>
+ <p>例えば「Windows 10の上でUbuntuが動いている」という場合、Windows 10がホスト、Ubuntuがゲストになります。</p>
+
+ <h4>VirtualBox</h4>
+ <p><img src="./images/vbox-1.png" alt="VirtualBox"></p>
+ <p>Oracle社が開発する仮想化を行うソフトウェアです。WindowsとMac、Linux上で動作させることができます。</p>
+ <p>ホスト型と呼ばれる最も一般的な種類のものです。USBデバイスなどの管理がしやすいのが特徴です。</p>
+ <p>以下で紹介するVMwareと違ってオープンソースで開発されています。</p>
+
+ <h4>VMware Workstation Player</h4>
+ <p><img src="./images/vmware-1.png" alt="VirtualBox"></p>
+ <p>VMware社が開発する仮想化ソフトウェアです。Windows上とLinux上で動作させることができます。（Mac用としてはVMware Fusion）があります</p>
+ <p>個人的な用途での利用は無料ですが商用で使用するには有料版のWorkstation Proを購入する必要が有ります。</p>
+ <p>VirtuakBoxより安定して動作する印象があります。</p>
+
+ <h4>Docker</h4>
+ <p>上の2つとは少し違うものです。DockerはLinux上でしか利用が出来ません。</p>
+ <p>Dockerは「コンテナ型」と呼ばれるもので、ホストOSのLinuxカーネルを共有することで上記2つのホスト型より高速に動作させることができます。</p>
+ <p>また、管理や環境の構築もDockerfileでかんたんに行えるのも特徴の1つです。</p>
+
+ <h4>Qemu</h4>
+ <p>これもまた上の3つとは違うものです。QemuはWindowsとLinux上で利用できます。</p>
+ <p>Qemuはアーキテクチャをエミュレートするので。x86_64上でARMやPPCなどを実行できるのが特徴です。</p>
+ <p>ただし、動作はホスト型よりも遅くなってしまいます。Linuxでは<code>virt-manager</code>を使用してGUIで管理できます。</p>
+
+ <h3>ディストリ開発に必要なのはどれなのか</h3>
+ <p>通常はVirtualBoxとVmwareを使えばいいと思います。Alter Linuxもこの2つで検証を行っています。</p>
+ <p>Ubuntu系では仮想マシンのp設定が重要になってくるので別途解説します。</p>
+ <p>それ以外のディストリではビルドしたisoを検証することにしか使用しないのでそこまで重要ではありません。</p>
+
+ <h2>VMware Workstation Playerのインストールと使い方</h2>
+ <p>現在工事中👷</p>
+
+ <h2>VirtualBoxのインストールと使い方</h2>
+ <p>現在工事中👷</p>
+ </main>
+
+ <?php include("${commonhtml}/aftermain.php"); ?>
+</body>
+</html>
paddingBottom: $("footer").outerHeight() + "px"
})
+ $("#sidemenu-right").css({
+ paddingBottom: $("footer").outerHeight() + "px"
+ })
+
document.getElementById("scroll-up").addEventListener("click", function(){
//$("body, html").scrollTop(0);
$('body, html').animate({scrollTop: 0}, 300, 'swing');
window.addEventListener("load", FooterBlank);
window.addEventListener("resize", FooterBlank);
-
-
-/*
-function FooterBlank(){
- $("#footerblank").css({
- paddingBottom: $("footer").outerHeight() + $("scroll-up").outerHeight() + "px",
- });
-
- $("#scroll-up").css({
- paddingBottom: $("footer").outerHeight() + "px",
- });
-
- document.getElementById("scroll-up").addEventListener("click", function(){
- //$("body, html").scrollTop(0);
- $('body, html').animate({scrollTop: 0}, 300, 'swing');
- })
-}
-*/
document.getElementById("open-sp-menu").addEventListener("click", SwitchMenu);
document.getElementById("open-sp-menu").addEventListener("load", SwitchMenu);
-window.addEventListener("load", function () {
+// スマホで開いたときにメニュー用の幅を確保する
+function SetSpMenu() {
// スマホCSSが適用されてる場合の処理
if (document.body.clientWidth < 799){
$("main").css({
paddingTop: $("header").outerHeight() + "px"
})
- document.body.addEventListener("click", (e) => {
- if(! (e.target.closest("#header") || e.target.closest("#open-sp-menu") )&& document.getElementById("bar-container").classList.contains("show-menu") ){
- SwitchMenu("close");
- }
+ }else{
+ $("main").css({
+ paddingTop: 0
})
}
+}
+window.addEventListener("load", SetSpMenu);
+window.addEventListener("resize", SetSpMenu);
+
+// ボタン以外の場所が押されたらボタンを閉じる
+window.addEventListener("load", function(){
+ document.body.addEventListener("click", (e) => {
+ if(! (e.target.closest("#header") || e.target.closest("#open-sp-menu") )&& document.getElementById("bar-container").classList.contains("show-menu") ){
+ SwitchMenu("close");
+ }
+ })
})
margin-bottom: 1%;
}
main p{
- line-height: 2em;
+ line-height: 2;
+ margin-bottom: 1em;
}
+
+/* h2のスタイル */
+
+h2 {
+ position: relative;
+ padding: 1rem .5rem;
+ margin-bottom: 1em;
+ }
+
+h2:after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 6px;
+ content: '';
+ border-radius: 3px;
+ /*background-image: linear-gradient(to left, #2af598 0%, #009efd 100%); */
+ background-color: var(--green-1);
+}
+
+
/* === ここまで本文 === */
display:none;
}
+#sidemenu-right h2{
+ text-align: center;
+}
+
#main-container{
display: flex;
margin: 0 auto;
position: relative;
}
+
+#link-collection ul, #relation_page ul{
+ list-style:none;
+ padding-left: 10px;
+}
+
+#link-collection a{
+ color: blue;
+ text-decoration: none;
+}
+
+#about-hayao img{
+ margin: 0 auto;
+ text-align: center;
+ width: 50%;
+}
+
+#hayao-icon{
+ margin-bottom: 4%;
+}
/* === ここまでサイドメニュー === */
#scroll-up{
position: fixed;
bottom: 0;
- right: 20%;
+ right: 24%;
background-color: var(--black-1);
color: var(--white-1);
line-height: 50px;
- width: 10%;
+ width: 5%;
text-align: center;
cursor: pointer;
}
#header{
position: fixed;
top: 0;
+ z-index: 1000;
}
#open-sp-menu{
left: 0;
padding-top: 1%;
padding-left: 1%;
- z-index: 1000;
+ z-index: 1100;
color: white;
}
/* === ここまでメニューバー === */
padding-right: 1%;
margin: 1%;
}
+
+main p{
+ line-height: 2;
+ margin-bottom: 1em;
+}
+
+h2 {
+ position: relative;
+ padding: 1rem .5rem;
+ z-index: 0;
+ }
+
+h2:after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 6px;
+ content: '';
+ border-radius: 3px;
+ /*background-image: linear-gradient(to left, #2af598 0%, #009efd 100%); */
+ background-color: var(--green-1);
+}
/* === ここまで本文 === */
\ No newline at end of file
--black-1: #2c3e50;
--black-2: #576574;
--white-1: #ecf0f1;
+ --green-1: #1abc9c;
}
\ No newline at end of file
OSDN Git Service
