いきなりゲームブック１
最初に、参考書籍を書いておきますね。以下参考書籍と呼びますが"Ionicで作るモバイルアプリ制作入門[Angular版]"（ISBN978-4-86354-292-1)です。
１．blankテンプレート
さて、つい先ほどサンプルアプリの起動まで行いましたが、出来そうな気もしてきたので"GameBook"と言う新しいプロジェクトを、白紙のテンプレート(blank)で作成しました。
この段階でカレントディレクトリー内のGameBookフォルダー(プロジェクト名と一緒です)の中は、フォルダー数4965、ファイル数46412、容量444MBとなっています。
フォルダーが一つ少ないだけで中身はほぼ一緒のようですね。
チュートリアル同様にコマンド cd .\GameBook と ionic serve で起動してみました。
まっさらな画面を期待したのですが、ユーザーインタフェースの部品はこっちにあるよ？的に書いて有るページが表示されました。
２．とりあえずいじってみる
さて、いよいよソースコードをいじってみたいと思います。
その前に、表示されているアプリのソースコードをブラウザから見て見ます。(これを書いてる現在、私もほぼ予備知識なしです)
まず現在、ブラウザに表示されている文字列は以下の通りです
----------------------------------------
Blank
Ready to create an app?
Start with Ionic UI Components
----------------------------------------
そして、ブラウザの機能でページのソースを表示してやると以下のようになります。
----------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Ionic App</title>
<base href="/"/>
<meta name="color-scheme" content="light dark"/>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="msapplication-tap-highlight" content="no"/>
<link rel="icon" type="image/png" href="assets/icon/favicon.png"/>
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="stylesheet" href="styles.css"></head>
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" defer></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>
----------------------------------------
表示文字列らしきものはどこにも無いですよね？
ホームページのコンテンツ(つまり人間が読むための中身)は<body>タグと</body>タグの間に書くのですが、その部分は以下のようになっています。
----------------------------------------
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" defer></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
----------------------------------------
<script></script>タグに挟まれた部分はJavaScriptですので、怪しいのは<app-root></app-root>の間ですね。
そこでページ全体を選択して、その部分のソースコードをブラウザで見て見ると
----------------------------------------
<html class="plt-tablet plt-desktop md hydrated" mode="md" lang="en"><head>
<meta charset="utf-8"><style data-styles="">ion-menu-button,ion-menu,ion-menu-toggle,ion-fab-button,ion-fab,ion-fab-list,ion-refresher-content,ion-refresher,ion-back-button,ion-toast,ion-card,ion-card-content,ion-card-header,ion-card-subtitle,ion-card-title,ion-item-option,ion-item-options,ion-item-sliding,ion-accordion,ion-accordion-group,ion-infinite-scroll-content,ion-infinite-scroll,ion-reorder,ion-reorder-group,ion-segment-button,ion-segment,ion-tab-button,ion-tab-bar,ion-chip,ion-searchbar,ion-nav,ion-nav-link,ion-slide,ion-slides,ion-input,ion-textarea,ion-backdrop,ion-loading,ion-breadcrumb,ion-breadcrumbs,ion-modal,ion-route,ion-route-redirect,ion-router,ion-router-link,ion-avatar,ion-badge,ion-thumbnail,ion-col,ion-grid,ion-row,ion-img,ion-progress-bar,ion-range,ion-split-pane,ion-text,ion-toggle,ion-virtual-scroll,ion-picker-column-internal,ion-picker-internal,ion-radio,ion-radio-group,ion-ripple-effect,ion-button,ion-icon,ion-datetime,ion-picker,ion-picker-column,ion-action-sheet,ion-alert,ion-popover,ion-checkbox,ion-select,ion-select-option,ion-select-popover,ion-app,ion-content,ion-footer,ion-header,ion-router-outlet,ion-title,ion-toolbar,ion-buttons,ion-spinner,ion-item-divider,ion-item-group,ion-skeleton-text,ion-list,ion-list-header,ion-item,ion-label,ion-note{visibility:hidden}.hydrated{visibility:inherit}</style>
<title>Ionic App</title>
<base href="/">
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<style>html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}</style><style>ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md::after{left:0;bottom:-5px;background-position:left 0 top -2px;position:absolute;width:100%;height:5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);background-repeat:repeat-x;content:""}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{left:unset;right:unset;right:0}[dir=rtl] .header-md::after,:host-context([dir=rtl]) .header-md::after{background-position:right 0 top -2px}.header-collapse-condense{display:none}.header-md.ion-no-border::after{display:none}</style><link rel="icon" type="image/png" href="assets/icon/favicon.png">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="styles.css"><style>
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJhcHAuY29tcG9uZW50LnNjc3MifQ== */</style><style>#container[_ngcontent-glk-c141] {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container[_ngcontent-glk-c141] strong[_ngcontent-glk-c141] {
font-size: 20px;
line-height: 26px;
}
#container[_ngcontent-glk-c141] p[_ngcontent-glk-c141] {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container[_ngcontent-glk-c141] a[_ngcontent-glk-c141] {
text-decoration: none;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvbWUucGFnZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0Usa0JBQUE7RUFFQSxrQkFBQTtFQUNBLE9BQUE7RUFDQSxRQUFBO0VBQ0EsUUFBQTtFQUNBLDJCQUFBO0FBQUY7O0FBR0E7RUFDRSxlQUFBO0VBQ0EsaUJBQUE7QUFBRjs7QUFHQTtFQUNFLGVBQUE7RUFDQSxpQkFBQTtFQUVBLGNBQUE7RUFFQSxTQUFBO0FBRkY7O0FBS0E7RUFDRSxxQkFBQTtBQUZGIiwiZmlsZSI6ImhvbWUucGFnZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiI2NvbnRhaW5lciB7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcblxuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IDA7XG4gIHJpZ2h0OiAwO1xuICB0b3A6IDUwJTtcbiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC01MCUpO1xufVxuXG4jY29udGFpbmVyIHN0cm9uZyB7XG4gIGZvbnQtc2l6ZTogMjBweDtcbiAgbGluZS1oZWlnaHQ6IDI2cHg7XG59XG5cbiNjb250YWluZXIgcCB7XG4gIGZvbnQtc2l6ZTogMTZweDtcbiAgbGluZS1oZWlnaHQ6IDIycHg7XG5cbiAgY29sb3I6ICM4YzhjOGM7XG5cbiAgbWFyZ2luOiAwO1xufVxuXG4jY29udGFpbmVyIGEge1xuICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG59Il19 */</style></head>
<body>
<app-root _nghost-glk-c140="" ng-version="13.2.7"><ion-app _ngcontent-glk-c140="" class="md ion-page hydrated"><ion-router-outlet _ngcontent-glk-c140="" class="hydrated"><app-home _nghost-glk-c141="" class="ion-page" style="z-index: 101;"><ion-header _ngcontent-glk-c141="" ng-reflect-translucent="true" role="banner" class="md header-md header-translucent header-collapse-none header-translucent-md hydrated"><!----><ion-toolbar _ngcontent-glk-c141="" class="toolbar-title-default md in-toolbar hydrated"><ion-title _ngcontent-glk-c141="" class="md title-default hydrated"> Blank </ion-title></ion-toolbar></ion-header><ion-content _ngcontent-glk-c141="" ng-reflect-fullscreen="true" class="md content-ltr hydrated" style="--offset-top: 56px; --offset-bottom: 0px;"><ion-header _ngcontent-glk-c141="" collapse="condense" ng-reflect-collapse="condense" role="banner" class="md header-md header-collapse-condense hydrated"><!----><ion-toolbar _ngcontent-glk-c141="" class="toolbar-title-large md in-toolbar hydrated"><ion-title _ngcontent-glk-c141="" size="large" ng-reflect-size="large" class="md title-large hydrated">Blank</ion-title></ion-toolbar></ion-header><div _ngcontent-glk-c141="" id="container"><strong _ngcontent-glk-c141="">Ready to create an app?</strong><p _ngcontent-glk-c141="">Start with Ionic <a _ngcontent-glk-c141="" target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p></div></ion-content></app-home></ion-router-outlet><!--container--></ion-app></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" defer=""></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script>
</body></html>
----------------------------------------
こうなります。
<app-root></app-root>の間に限れば、
----------------------------------------
<app-root _nghost-glk-c140="" ng-version="13.2.7"><ion-app _ngcontent-glk-c140="" class="md ion-page hydrated"><ion-router-outlet _ngcontent-glk-c140="" class="hydrated"><app-home _nghost-glk-c141="" class="ion-page" style="z-index: 101;"><ion-header _ngcontent-glk-c141="" ng-reflect-translucent="true" role="banner" class="md header-md header-translucent header-collapse-none header-translucent-md hydrated"><!----><ion-toolbar _ngcontent-glk-c141="" class="toolbar-title-default md in-toolbar hydrated"><ion-title _ngcontent-glk-c141="" class="md title-default hydrated"> Blank </ion-title></ion-toolbar></ion-header><ion-content _ngcontent-glk-c141="" ng-reflect-fullscreen="true" class="md content-ltr hydrated" style="--offset-top: 56px; --offset-bottom: 0px;"><ion-header _ngcontent-glk-c141="" collapse="condense" ng-reflect-collapse="condense" role="banner" class="md header-md header-collapse-condense hydrated"><!----><ion-toolbar _ngcontent-glk-c141="" class="toolbar-title-large md in-toolbar hydrated"><ion-title _ngcontent-glk-c141="" size="large" ng-reflect-size="large" class="md title-large hydrated">Blank</ion-title></ion-toolbar></ion-header><div _ngcontent-glk-c141="" id="container"><strong _ngcontent-glk-c141="">Ready to create an app?</strong><p _ngcontent-glk-c141="">Start with Ionic <a _ngcontent-glk-c141="" target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p></div></ion-content></app-home></ion-router-outlet><!--container--></ion-app></app-root>
----------------------------------------
こうなります。表示されている文字列もここには記載されているのが判りますね。
ちょっと長くなってきたので、分けて書きたいと思います。
