日常とデジタルアーカイブ
デジタルアーカイブについて
みなさん、もしかしたら聞いたことがあるかもしれない言葉かと思います。
私自身は情報系ですが、今回はどちらかというと人文系の話寄りです。
デジタルアーカイブと言って、ほとんどは歴史的な資料を
電子媒体に保存することを指します。
保存の形式は様々で、
3Dスキャナーでの3Dイメージ保存だったり、
デジカメで撮った写真を画像として保存したり。
なんでこんな話をするかというと、
デジタルアーカイブをみんなにもっとしてほしいなあって思いからです。
どんなものがデジタルアーカイブになる？
あなたの日常の風景です。
田舎での暮らし、都会での暮らし。
飲み屋で馬鹿笑いしてる会社員の風景。なんでもいいです。
そこに住んでいないとわからない日常すべてに価値があります。
都会に住んでいる人が、田舎の日常を想像でしか語れないように、
あなたが見ている日常のアーカイブは、
他の誰かにとって文化的にとても貴重なものです。
例えば20年後...
今はシャッター街と呼ばれる商店街が
都市開発で大きな高層ビルに建て替えられたとします。
建て替えられもせず解体されるかもしれません。
当時商店街には人が行き交い、
肉屋や八百屋、婦人服やよくわからない店など
色んなものがありました。
しかし、時代の流れには抗えず荒廃したり、建て替えられたりしていく。
言葉ではああだったこうだったと言うことができるかもしれない。
でも、人の記憶って曖昧で脆い。
そういう失われた日常があったと、
デジタルアーカイブを残すだけでも充分な価値だと思っています。
夜の伏見稲荷に行ってきました
異世界 夜の伏見稲荷
怖いとは聞いていましたが、いかほどか確かめてみたいなと思いもあり、詳しい人に案内してもらいました。
よく画像で挙げられる千本鳥居ですが、
夜になるとこんな感じ
なんともいいがたい感じですねぇ。
とてもいい。
千本鳥居を抜けた先には本来なら通れるはずの通路が...
ちなみに先日の台風の影響もあり、夜間は通行止め（2018/11/04現在）みたいです。
この通行止め表札も際立って"異世界への門"という感じです。
ちなみに迂回ルートがあるらしく知人曰く3つのルートがあり、
2つはこのように通行止めになっていましたが、
1つのルートは夜間でも通れるみたいです。
そのルートを通りいざ登山に踏み切りますが、
やはり先ほどの有名なルートが閉ざされていることもある
人気が全くない。
静かな空間で登って行く中の伏見稲荷は不思議に神聖な感覚でした。
四ツ辻からの夜景はとても綺麗でした。
ちなみに電球が壊れている場所もちらほらあり、
本ルートが封鎖されている理由もすこしわかったり
この奥電灯がなくて本当に暗いです雰囲気もあります。
この後、ここを通って無事下山しました。
夜の伏見稲荷とてもいい場所でした。
正直夜も昼も神社は神社といったところでしょうか。
ただ、道を外れると本当に怖いです。
今回は詳しい人に付いて行きましたが、
夜に稲荷山に登るのは何回か行ったことのある場合にした方が良さそうですね。
神道で騒ぐのも失礼です。
竹原と尾道に行ってきました - 竹原
大久野島
よく知られる名前はうさぎの島ですね。
島内では、半野生のうさぎがおり、
日々、縄張り争いなど繰り広げているそう。
元々は戦時中毒ガス工場などがあり、重い歴史もあったり。
大久野島行きの潮待ち桟橋から
大久野島のうさぎ
大久野島のうさぎは野生なので病気もちもいるそうで、
噛まれると感染する恐れがあると後で知るなど...。
竹原
アニメたまゆらの聖地として知られる竹原です。
自動車で行ったのですが、後から知ったことで、
呉あたりは西日本大豪雨の被害が大きく、
竹原駅までの電車が動いていなかったらしい。
実家は岡山にありますが、岡山も大変な被害を受けました。
竹原は国から指定された保存地区で、
竹細工などの有名な伝統工芸があります。
たまゆらの看板
竹原の街並み
たまゆらに出てくる名所
帰り際に小学生が通りすぎるなど、
やはり地域性のある観光名所っていいものですね。
37℃の真夏日の中長等公園に
目的は以前(2016年)偶然見つけた
欠けた鳥居を撮りに行こうと思ったこと。
家から自転車で10kmほどでしたが、
なかなか37℃と暑いので少し頭クラクラしてました。
ついて勢いで上って目的地についた！！
と思ったら....
見事に修繕されてましたね。。
以前はこんな感じ
残念ですがこれはこれで、雰囲気のある鳥居を撮ることができました。
行きがけに閑古鳥が鳴いていそうな商店街もちらほら
シャッター街を見るとなんとなく物悲しいものです。
帰りにメロンクリームソーダを売ってるラーメン屋を見つけて
入って頼んだら店主夫妻？が(時間外なのを知らなかった)好意で出してくれたり、
少し世間話したりといい時間になりました。
今まで撮ってきた写真と地域（１）
新穂高ロープウェイの第二展望台から登山口に入る手前の風景です。
第二展望台にある売店で買える、オコジョのぬいぐるみが可愛らしいので
記念に買ったのが思い出。
自宅マンションからの夕焼け 夏
滋賀県某所ですが, 手前の林の中に神社があり, 街に溶け込んだ
神社の風景は少し近寄りづらいけど、少し温かい。
自宅マンション近くの神社 正月
正月になると、地域の人などが集まって新年を祝います。
普段はこの祠？も明かりはついてないですが、
正月のみのすこし変わった風景でした。
友達と行きましたが、
近年話題になってきている紅葉スポットらしいです。
近隣には駐車場が少なく、公共交通機関もすくないため
シーズン時は混雑します。
こういう原風景はこれから先も大切にして行きたいものです。
就活終了記念に 一人で登山しました。
昔は友達と小豆島一周とかいうバカしてましたがその友達とは離れ離れ。
虚しくとも、思いっきり登るぞと意気込んで ー
山頂近くの最澄が生涯を閉じたお寺に立ち寄りました。
目的は休憩でしたが、人がいるとは見ず知らず。
住職のご好意でお茶と瓦煎餅をいただくことに ー
いろんな話をしながら30分ほど滞在して
「またおいで」と言ってもらいました。
多分行くのは、卒業が確定したらかな...。
滋賀県 - 長等公園 山中
たまたま見つけましたが、
ちょっとくぐるのは腰が引けましたね。
2016年の夏頃なので今はまだあるのかな。
歩道トンネルを歩くのは小さい頃以来でした。
まあいい雰囲気漂ってますが、普通に軽トラとバイクとか通ります。
今回はここまで
今年の夏も色々撮りたいな。
React.jsをNode.js+Webpack+Babelで環境構築
React.jsの環境構築難しくない？
環境構築...思ったよりもかなり難しかった..。
要件
以下の要件で進めていこうと思います。
1. React.jsをNode.jsで利用できる
2. 極力テンプレとして利用できる
3. ローカルサーバを起動できる
4. Hello WorldをWeb上に表示できる
5. ComponentsとPropsの記述方法が簡易にわかる
どうしてWebpackとBabelを利用するのか
まずReact.jsとは？
React.jsは主にDOM操作を仮想DOMを用いることにより
簡潔に記述することが可能なライブラリである。
また、コンポーネントベースと言って
例えば、オブジェクトクラスをコンポーネントに分割するように
コンポーネントにわけて記述し仮想DOMが操作できるため、
構造的に可読性の高い記述が可能になっている。
Babelを利用する理由
Babelを利用する理由として、
ほとんどのブラウザがES6に対応していないため、
ES6で規格が決まっているReact.jsを
ES5にトランスパイルすることで
ブラウザに認識させる役割を担っている。
Webpackを利用する理由
主にはBabelとReact.jsをバインドするために用いる
今回はせっかくなのでWebpackを用いてローカルサーバを起動する。
ファイル構造
必要ライブラリ
以下npmとNode.jsはある程度理解できている前提とする。
$ npm init $ npm install react $ npm install react-dom $ npm install --save-dev webpack babel-core babel-loader $ npm install --save-dev babel-preset-react babel-preset-es2015 $ npm install html-webpack-plugin
webpack.connfig.js設定
これでローカルサーバを起動し、index.html/App.js/babelなどを
いい感じに紐づけることができる。
作成したJSファイルに以下のように記述していく。
webpackの仕様がよく変わるらしい？ので
2017年の参考サイトでもエラーが出ます。
パッケージによってもエラーが出るらしいですが
2018/05/05時点での各最新パッケージにて実行しました。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'js/App.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: __dirname + './index.html',
port: 3000,
},
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.js$/,
loaders: 'babel-loader',
query: {
presets:['react','es2015']
}
},
]
},
plugins: [
new HtmlWebpackPlugin({template: './index.html'})
]
};
package.json設定
npmによって生成されたpackage.jsonに追記していきます。
追記箇所１については、
サーバを起動している間変更があれば
コンパイルを自動でするための設定。
追記箇所２については、
BabelにES2015とReact.jsを利用ための設定。
ここを.bablrcに記述するサイトが多いですが非推奨。
{
"name": "react_sample",
"version": "1.0.0",
"description": "",
"main": "app.js",
//追記箇所１
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"eslint": "4.19.1",
"fs": "0.0.1-security",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"http": "0.0.0",
"path": "^0.12.7",
"react": "16.3.2",
"react-dom": "16.3.2",
"webpack": "4.7.0"
},
"devDependencies": {
"babel-loader": "7.1.4",
"babel-preset-env": "1.6.1",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"webpack-dev-server": "^3.1.4"
},
//追記箇所２
"babel": {
"presets": [
"env",
"react",
"es2015"
]
}
}
JSファイルについて
localhost:3000でフォームとSendボタンを表示し、
Sendボタンが押されると、
アラートを出すコードになっている。
App.js
Javaなどでいうmainクラスのように扱える。
FormApp.jsをimportしている。
import React, { Component } from 'react';
import { FormApp } from './FormApp';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<FormApp />
);
};
};
ReactDOM.render(
<App />,
document.getElementById('root')
);
export default App;
FormApp.js
App.jsに継承するように記述することが可能で、
コンポーネントといい、DOM操作の記述ファイルにおいて
階層構造をとることが可能。
import React, { Component } from 'react';
export class FormApp extends Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleSend = this.handleSend.bind(this);
};
render() {
return (
<div>
<input type="text" />
<button onClick={this.handleSend}>SEND</button>
</div>
);
};
以上で終了です。
1. npm run build
2. npm start
以上を実行すればlocalhost:3000で
動作確認ができると思います。
でわでわ //
簡単な実装はこっちで書いてます
