LoginSignup
19
8

More than 3 years have passed since last update.

@thinkingrobo

カフェでプログラミングしてる風（でも何もやってない）の Ionic (Angular + Typescript) コード

Last updated at Posted at 2021-03-13

おしゃれなカフェで...

はじめまして、S/Wエンジニアのかつしょんです。
最近、Ionic(Typescript + Angular)にはまっていまして、
いろいろと他の方の記事に助けられているため、
少しづつ、自分が得た知見を記事に残していこうと思います。
（この記事が、Qiita初投稿です、、、、）

さて、今回は、こちらの記事のJavaコードをベースに、ブラウザで動作する Ionic版 (Anugular + Typescript) を作ってみました。
カフェでプログラミングしてる風（でも何もやってない）Java（クソ）コード

この記事の発想、大好きです！

開発環境

今回の開発環境は下記となります。

Ionic:

   Ionic CLI                     : 5.4.16 
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Utility:
   cordova-res : 0.11.0
   native-run  : 1.0.0

System:
   NodeJS : v10.16.3 
   npm    : 6.9.0
   OS     : Windows 10

プロジェクトを作る

まずは、ブランクのプロジェクトを作成します。
プロジェクトの名前は　CafeDeShigoToとします。
コマンドプロンプトを起動し、下記を入力。

ionic start CafeDeShigoTo blank

これで、まずはブランクプロジェクトの完成です。

コンソール画面を作る

コンソール画面を作っていきます。
HTML → SCSS → TSファイルの順に作っていきます。

home.page.htmlの編集

元記事の場合は、JAVAコードですので、PCのコンソールで実行できますが、
今回はブラウザ上で動作させたいので、まずはコンソール風のページを作ります。

home.page.htmlを開くと、生成時は下記となっています。

home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

ion-headerは不要です。
今回はスクロールする必要もないのでion-contentも削除します。
下記のようにします。

home.page.html

<div id="container">
<p>{{console}}</p>  
</div>

すっきりですね。
{{console}} は、後でhome.page.tsで定義する consoleという変数の中身を表示するということになります。

home.page.scssの編集

続いて、CSSファイルを編集します。
生成時は下記のようになっています。

home.page.scss

#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}

これをコンソール風に変更します。

home.page.scss

#container {
  text-align: left;
  padding: 10px;
  background-color: black;
  width: 100%;
  height: 100%;
  overflow: scroll;         // あふれたらスクロールバーを表示
}

#container p {
  font-size: 16px;          // font size はお好みで
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
  white-space: pre-wrap;    // 改行コードで改行するため
}

なお、white-space: pre-wrap;　を入れないと、改行コードが効かないので入れ忘れないように。

home.page.tsの編集

続いて、 home.page.tsを編集します。
生成時は下記のようになっています。

home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor() {}

}

下記のようにします。

home.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public console: string = "" // 画面に表示する文字（コンソールバッファ）

  constructor() { }

  // 画面が表示し終わったタイミングで呼び出される
  ionViewDidEnter() {
    this.main();
  }

  public async main() {
    // 50文字まで#を表示する
    let x: number = 50;
    // カウントアップする変数
    let y: number = 0;
    while (true) {
      if (x != y) {
        // 上限まで#を足していく
        this.print("#");
      } else {
        // 50文字になったら「 done!! + 改行」を出力し
        // 何かが終わった感を演出
        this.println(" done!!");
        // カウントアップをリセット
        y = -1;
      }
      // カウントアップしていく
      y++;
      // 高速で出力すると素敵感が出ないので
      // 出力待ち時間を作成する
      let sleepTime: number = 10;
      // ランダム値にマッチすると待ち時間をさらに長くする。
      // 何か大きな処理をしているように見えること請け合い
      let osooso: number = Math.floor((Math.random() * 10));
      if (4 < osooso && osooso <= 6) {
        sleepTime = 100;
      }
      await this.sleep(sleepTime);
    }
  }

  /**
   * sleep関数
   * @param milliseconds ミリ秒
   */
  private sleep(milliseconds: number) {
    return new Promise<void>(resolve => {
      setTimeout(() => resolve(), milliseconds);
    });
  }

  /**
   * print関数
   * @param str コンソールに表示する文字列
   */
   private print(str: string) {
    this.console = this.console + str;
    document.getElementById("container").scrollTop = document.getElementById("container").scrollHeight;   // 画面をscrollする
  }

  /**
   * println関数
   * @param str コンソールに表示する文字列
   */
   private println(str: string) {
    this.console = this.console + str + '\n';
  }

}

まず、sleep関数がありませんので、 async/awaitを使ってsleep関数を作成します。

続いて、print関数、println関数を作成します。
これらの関数は、this.consoleというコンソルバッファへ文字列を連結するようにします。

あと、元の記事のコードをmain関数として移植（コピー＆ペースト）してから、
細かい文法の違いを修正します。

動作確認

下記コマンドを実行して、ブラウザ上で動作を確認します。

ionic serve

demo1.gif

この何かしている感！！笑
こりゃきっと何かしてますね！！笑

コンパイルが動いている風

せっかくなので、もう一つの「コンパイルが動いている風」のほうも作っておきます。

下記を実行して、新しいページ(compile)を作ります

ionic g page compile

つづいて、生成された compileフォルダの各ファイルを下記のようにします。

まずはHTMLファイル。

compile.page.html
<div id="container">
  <p>{{console}}</p>  
</div>

続いて、SCSSファイル。

compile.page.scss
#container {
    text-align: left;
    padding: 10px;
    background-color: black;
    width: 100%;
    height: 100%;
    overflow: scroll;
  }

  #container p {
    font-size: 16px;          // font size はお好みで
    line-height: 22px;
    color: #8c8c8c;
    margin: 0;
    white-space: pre-wrap;    // 改行コードでするため
  }

上記二つは、先ほどの場合と同じです。
で、のこりはTS(Typescript)ファイルです。

compile.page.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-compile',
  templateUrl: './compile.page.html',
  styleUrls: ['./compile.page.scss'],
})
export class CompilePage implements OnInit {

  public console: string = "" // 画面に表示する文字（コンソールバッファ）

  constructor() { }

  ngOnInit() {
  }

  // 画面が表示し終わったタイミングで呼び出される
  ionViewDidEnter() {
    this.main();
  }

  public async main() {
      console.log("main")
      while (true) {
        // カウントアップ
        let x:number = 1;
        // 出力文字列
        let code: string = "";
        while(true) {
          // 0から9までの数値をランダムで出力
          let num:number = Math.floor(Math.random() * 9);
          // 出力文字列に足していく
          code += num.toString();
          if (x == 50) {
            // 50文字でブレイク
            break;
          }
          x = x + 1;
          console.log(x)
        }
        // 数値の羅列を出力：いい感じにコンパイルしてる感が出る
        this.println(code);
        // 高速で出力すると素敵感が出ないので
        // 出力待ち時間を作成する
        let random: number = Math.floor(Math.random() * 10);
        let sleepTime: number = 100;
        // ランダム値にマッチすると待ち時間をさらに長くする。
        // 何か大きな処理をしているように見えること請け合い
        if (4 < random  && random <= 6) {
          sleepTime = 500;
        }
        // 待つ
        await this.sleep(sleepTime);
      }
  }

  /**
   * sleep関数
   * @param milliseconds ミリ秒
   */
  private sleep(milliseconds: number) {
    return new Promise<void>(resolve => {
      setTimeout(() => resolve(), milliseconds);
    });
  }

  /**
   * println関数
   * @param str コンソールに表示する文字列
   */
  private println(str: string) {
    this.console = this.console + str + '\n';
    document.getElementById("container").scrollTop = document.getElementById("container").scrollHeight;
  }

}

sleep関数の呼び出し時に、awaitを付け忘れがちです。
awaitをつけないと、ブラウザが固まってしまいますので、
ご注意ください。

あとは、ionic serve を実行して起動します。

今回はcompileというページに作りましたので、
http://localhost:8100/compile にアクセスします。

compile-0001.gif

実際に、近くのタリーズに行って実行してみましたが、
もう、何かすごいことをしている感がでまくりでした！

19
8
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
19
8