Corredor

ウェブ、プログラミングの勉強メモ。

Reveal.js を使って Markdown ファイルでスライドを作ってみる

Reveal.js というライブラリを使って、Markdown ファイルでスライド資料を作ってみる。

今回は機能を深くは掘り下げず、お試し環境を構築してみるところまで。

まずは Reveal.js の Git リポジトリを Clone し、必要なパッケージをインストールする。

$ git clone https://github.com/hakimel/reveal.js.git
$ cd reveal.js/
$ npm install

この時点で $ npm start してみると、index.html に記載の、「Slide 1」「Slide 2」という簡単なスライドがブラウザで表示される。

次に、Markdown でスライドを作れるようにする。index.html を開き、

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
  </div>
</div>

この部分を以下のように直す。

<div class="reveal">
  <div class="slides">
    <section data-markdown="index.md" data-separator="^\n---\n$" data-separator-vertical="^\n>>>\n$"></section>
  </div>
</div>

そしたら、以下のような index.md を作成する。

# Slide 1

## 見出し2

### 見出し3

#### 見出し4

##### 見出し5

###### 見出し6

<!-- 「---」で次のページに移動する -->

---

# Slide 2

2ページ目。

_アンダースコア斜体_、*アスタリスク斜体*。  
__アンダースコア太字__、**アスタリスク太字**。  

`span` 要素で<span style="color: #f00;">赤色に</span>---

# Slide 3-1

<!-- リストの種類に関わらず2スペースでネストできる -->

- リスト
  - ネスト
    - さらにネスト
  - ネスト
    1. 番号付き
    2. 番号付き
      1. 番号ネスト
  - ネスト
- リスト

<!-- 「>>>」で下に移動する -->

>>>

# Slide 3-2

| Heading 1 | Heading 2 | Heading 3 |
|:----------|:---------:|----------:|
| Data 1-1  | Data 1-2  | Data 1-3  |
| Data 2-1  | Data 2-2  | Data 2-3  |
| Data 3-1  | Data 3-2  | Data 3-3  |

---

# Slide 4

<!-- ↓実際は「`」を半角の「`」に直す -->

```html
<DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Reveal.js Example</title>
  </head>
  <body>
    <script src="reveal.js"></script>
  </body>
</html>
```

作成したら、

$ npm start

で実行。http://localhost:8000/ が起動し、Markdown ファイルがパースされてスライドになっているはずだ。

index.html に記載した index.md 部分を別の Markdown ファイルに書き換えれば、この reveal.js ディレクトリはスライドの動作環境として使い回しが利く。

馴染みの Markdown ファイルで、簡単にスライドが作れるので、オススメ。

一生使える見やすい資料のデザイン入門

一生使える見やすい資料のデザイン入門

JavaScript で配列の中から最大値・最小値を求める : 異常値を省きつつ…

JavaScript で配列の中から最大値・最小値を求めるには、Math.max.apply() もしくは Math.min.apply() という構文が使える。

Math.max.apply(null, [0, 3, 10]);
Math.min.apply(null, [0, 3, 10]);

しかしこれは、言語仕様上、nullundefinedNaN が混じると正しく判定できなくなってしまう。

そこで、配列の中から数値として正しくない値を引っこ抜いて検証することにする。

今回用意した配列はこんなもの。

const array = [-1, -2.2, -Infinity, 0, Infinity, NaN, 1, null, 0xFFFF, 0b1101, 0o3162, undefined, 864e5, 9.99];

nullundefinedNaN が混じっているので、コレを除去したいと思う。なお、Infinity も入れてあるが、コレもあとで除外できる。

方法1 : Number 関数を利用して NaN を弾く

Number() 関数の引数に値を入れると、数値型に変換できるものは変換し、変換できないものは NaN にしてくれる。この結果を isNaN() 関数で判定すれば良い。

一つ注意しないといけないのは、Number(null)0 に変換されることだ。コレを回避するため、!== null な比較は必要。

Array.prototype.filter() を利用し、配列から条件に合う要素のみ抜き出してみた。

const nums = array.filter((item) => {
  return item !== null && !isNaN(Number(item));
});

方法2 : toString() を確認する

次は、Object.prototype.toStringcall() で借りて、各要素が [object Number] を返すかでチェックする。null[object Null]undefined[object Undefined] を返すのだが、NaN だけは [object Number] を返してくるので、最後に !isNaN() でチェックしている。

const nums = array.filter((item) => {
  return Object.prototype.toString.call(item) === '[object Number]' && !isNaN(item);
});

ちなみに、今回の配列の中で isNaN()true になるのは、NaNundefined のみ。nullfalse になる。

Infinity を除外するには isFinite()

方法1・2のどちらでも目的の結果は得られる。速度については気にしていない。

ココからさらに Infinity-Infinity を除外するには、isFinite() 関数を使う。

この関数は、Infinity-Infinity の他に NaNundefinedfalse を返すので、null だけ別に除外して以下のようにチェックすれば良い。

const nums = array.filter((item) => {
  return item !== null && isFinite(item));
});

あとはこうして filter() した要素を Math.max.apply()Math.min.apply() に突っ込めば OK。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん

Swift iOS アプリで一定時間後に処理をする

Swift にて、JavaScript における setTimeout() 的なことをやる方法。

環境情報

  • 対象 iOS バージョン:v11.3
  • Xcode:v9.3 (9E145)
  • Swift:v4.1 (swiftlang-902.0.48 clang-902.0.37.1)

処理を遅らせるには DispatchQueue.ayncAfter()

任意の処理を遅らせて実行するには、DispatchQueue.asyncAfter() を利用する。

// 処理を現時点から0.5秒後に実行する
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.5) {
  print("0.5秒後に実行")
}

JavaScript でいう setTimeout() と同じようなものだ。

setTimeout(() => {
  console.log('0.5秒後に実行');
}, 500);

作って学ぶ iPhoneアプリの教科書 【Swift4&Xcode 9対応】 ~人工知能アプリを作ってみよう! ~(特典PDF付き)

作って学ぶ iPhoneアプリの教科書 【Swift4&Xcode 9対応】 ~人工知能アプリを作ってみよう! ~(特典PDF付き)