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付き)

import・export を利用している TypeScript コードを HTML 上で動作させる方法

前回の続き。TypeScript コード内で importexport を用いていると、デフォルトの設定ではブラウザ上でそのコードが利用できないことを話した。

neos21.hatenablog.com

今回はこの対応方法を紹介する。

なお、今回の目的は「TypeScript の素振り環境として楽に構築できること」なので、Webpack などのバンドルツールを用いるのではなく、可能な限り素に近い状態から HTML 上で利用できるようにしてみる。

AMD or UMD 形式でトランスパイルして RequireJS を使う

まずは、AMD か UMD の形式で TypeScript コードをトランスパイルして、ブラウザ上で AMD 形式のファイルを動かせるライブラリ「RequireJS」を利用する方法。

RequireJS は、CDN で読み込んでも良いし、素振り環境なら npm install しておいても良いだろう。

# 現時点では v2.3.5 がインストールされた
$ npm install -S requirejs

npm パッケージの CDN サービスは、Yarn のページから確認しやすい。

次に、tsconfig.json のモジュール指定を "commonjs" から "amd" もしくは "umd" に変える。

"module": "amd",

// もしくは
"module": "umd",

UMD は AMD + CommonJS な仕様なので、どちらを指定しても変わらない。tsconfig.json の指定を変えたら再度コンパイルすること (watch 中なら tsconfig.json の変更自体も検知して再コンパイルしてくれる)。

HTML 側では以下のように実装することで、前回の記事で紹介した parent.js と、そこからインポートしている child.js が動くようになる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TypeScript on HTML Practice 1</title>
    <!-- CDN 利用時は "https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js" のように指定する -->
    <script src="../node_modules/requirejs/require.js" data-main="../dist/parent.js"></script>
  </head>
  <body></body>
</html>

data-main 属性で指定するのはエントリポイント、つまり全てのファイルの中で最初に呼ばれる中心となるファイル。このファイルからインポート関係をたどっていってくれる。

シンプルなやり方で良い感じ。

難アリ:ESModules 形式にして直接利用する

次に、最近登場した ESModules の仕組みを利用する方法を試してみた。しかしコチラは現状難アリ

tsconfig.json"module": "es2015" に書き換え、以下のような HTML を用意する。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TypeScript on HTML Practice 2</title>
    <script type="module" src="../dist/parent.js"></script>
  </head>
  <body></body>
</html>

これで上手くいきそうな気がするが、「dist/child なんてファイルないよ」といエラーが出てしまう。

よくよく dist/parent.js を見てみると、import 文がおかしい。

import { Child } from './child';

ESModules の仕様では、import 文は拡張子を含めて正確にファイルを指定しないといけない。なのでこれだと「dist/child なんてファイルないよ」とエラーになってしまう。

dist/parent.jsimport 文を以下のように直せば構文上は正しくなる。

import { Child } from './child.js';

しかし、このように直しても、ローカルで動かすには難がある。直接 HTML ファイルをブラウザで開くだけでは、Chrome や Firefox の場合 CORS 不正を疑われてしまい上手く動かない。オプション引数を指定して起動するか、http-server でも入れてローカルサーバを立てないといけない。

# Windows の場合
> chrome.exe --disable-web-security --user-data-dir

# Macの場合
$ open /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir

TypeScript の対応どうなっとるんだ?と思ったら、今のところ「トランスパイル時に import 文への拡張子付与とかしないんで」ってことみたい。tsc コマンド単体でのトランスパイルで ESModules を実現するのはまだ厳しそう。

一応、http-server を立て、import 文を手動で直したら、Chrome で動作させられることは確認できた。

失敗:SystemJS を使って TypeScript をそのまま動作させる

最後に、SystemJS というライブラリを使って、ブラウザ上で TypeScript をトランスパイルして動かしてみる方法があったので、試してみた。

コチラに沿って SystemJS を用意してみたが、どうもトランスパイラを特定できないとかで上手くいかず断念。

結論:AMD (UMD) 形式で出力して RequireJS を使おう

色々試したが、結局最初に紹介した RequireJS を使う方法が一番安全にできた。

Angular CLI から TypeScript に入ったので、Webpack もロクにいじらず、素の TypeScript の動かし方がイマイチ分かっていなかったが、これで少しは TypeScript の実行環境を気にすることができたと思う。

TypeScript実践マスター

TypeScript実践マスター