正直、ファイルのアップロードは考慮すべきことが多すぎてあまり関わりたくないのですが、そうも行かないのが世の定めｗ 今回はFetchAPIを利用してサクッとファイルをアップする手法についてまとめます。
サーバ側はPHPで実装しますが、考え方は他の言語でも流用できるのではないかと思います。
続きを読む
FetchAPI
[HTML5] Fetch API で GET/POST で通信する
Ajaxによる通信は長きに渡りXMLHttpRequest(XHR)で書かれていましたが、HTML5からFetchAPIが実装されずいぶんとシンプルに記述することが可能になりました。今回は基本的な使い方についてまとめておきたいと思います。
[HTML5] Canvasを画像に変換しサーバへ送信する
Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。
今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。
サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。
続きを読む
[HTML5] 音声ファイルの事前ダウンロード – audioタグ編
前回はaudioタグをJavaScriptで操作しましたが、事前にダウンロードが完了した状態で再生を開始することができませんでした。例えばボタンをクリックした瞬間に鳴らす場合にラグが発生したり、再生途中で停止(ダウンロード待ち)する恐れがあります。今回はダウンロードが完了しないと音声が再生できないような処理を追加します。
この手の処理はWebAudioAPIを用いたサンプルがネット上には転がっていますが、単にダウンロードされたことを検知したいだけで利用するには気が重いというか正直などころ面倒なので、前回同様audioタグを活かす方向で作成します。
続きを読む
はじめてのReact #22「ToDoアプリを作る」 後編
3回に渡ってお送りしたToDoアプリ開発も最終回。今回はAjaxを利用しデータをサーバに保存してみます。
Propsのデータ型をチェック
以前取り上げたPropsのデータ型のチェックを導入しておきます。
プロジェクトも運用段階に入りComponentがどこからどのように呼び出されるか、収集がつかなくなったとしても呼び出し方さえ守ってもらえれば何とかなったりするものです（それが良いかはさて置き）。また誤った利用方法をするとテスト段階でエラーを明示的に出してくれるのもありがたいものです。
src/header.js
import PropTypes from 'prop-types';
// <Header>
// React ToDo
// </Header>
Header.propTypes = {
children: PropTypes.string.isRequired
};
src/todocreate.js
import PropTypes from 'prop-types';
// <ToDoCreate onClick={this.handleClick} />
ToDoCreate.propTypes = {
onClick: PropTypes.func.isRequired
};
src/todolist.js
import PropTypes from 'prop-types';
// <ToDoList data={this.state.todo} remove={this.handleRemove}/>
ToDoList.propTypes = {
data: PropTypes.array.isRequired,
remove: PropTypes.func.isRequired
};
src/todoitem.js
import PropTypes from 'prop-types';
// <ToDoItem key={i.id} item={i} remove={this.props.remove} />
ToDoItem.propTypes ={
item: PropTypes.object.isRequired,
remove: PropTypes.func.isRequired
};
データをサーバ側で管理する
APIサーバを用意
Reactから話がずれますが、学習用に保存や取り出しを行うAPIサーバをNode.jsで準備します。かなり簡易的な物なので本番投入はしないでください。しないとは思いますがｗ
まずは適当な名前のディレクトリを作成しカレントディレクトリを別の場所に移します。今のプロジェクトは全く別の場所に作成してください。その後簡単にHTTPサーバを作成できるexpressを入れます。
$ mkdir apiserve; cd apiserve
$ npm install express
詳細は説明しませんが、以下のスクリプトをexpressをインストールしたディレクトリに適当な名前で保存します。ここではserve.jsとしました。
続きを読む
はじめてのReact #18「Ajaxでデータ取得」
昨今のWebアプリではWebAPI(RESTful API等)をAjaxなどで叩きデータを取得する、もしくはデータを保存するといった行為を日常的に行っているわけですが、今回はAjaxでデータ取得し表示するまでに挑戦してみます。
MonsterView Component
とあるRPGのモンスターの一覧が記録されたJSONファイルをAjaxで取得し、そのままReactで表示するサンプルです。公式ドキュメントの例をちょろっといじったものになります。
サンプル
データファイルです。実際にはサーバ側で動的に出力することが多いと思いますが、今回は静的なファイルで試します。ファイル名はdata.json。
{
"monsters": [
{ "id": 1, "name": "スライム", "hp": 10 },
{ "id": 2, "name": "ドラキー", "hp": 12 },
{ "id": 3, "name": "おおありくい", "hp": 36 }
]
}
実際の処理を行うHTMLです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MonsterView</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class MonsterView extends React.Component {
constructor(props) {
super(props);
this.state ={
isLoaded: false,
error: null,
monsters: []
}
}
componentDidMount() {
fetch("https://s3-us-west-2.amazonaws.com/blog.katsubemakito.net/static/react1st/18/data.json")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
monsters: result.monsters
});
},
(error) => {
this.setState({
isLoaded: true,
error: error
});
}
)
}
render() {
if (this.state.error) {
return <div>Error: {this.state.error.message}</div>;
}
else if ( !this.state.isLoaded ) {
return <div>Loading...</div>;
}
else {
return (
<ul>
{this.state.monsters.map( monster => (
<li key={monster.id}>
{monster.name} {monster.hp}
</li>
))}
</ul>
);
}
}
}
ReactDOM.render(
<MonsterView />,
document.getElementById('root')
);
</script>
</body>
</html>
