MacでIEのテスト/inputのaccept属性の動作について #83
今日やったこと
MacでIEのテスト
忌々しきInternet Explorerですが、未だに現役で使われているから動作検証しないわけにはいかないと。
それだけのためにWindows環境を用意しなくてもええんやで、という話を教えてもらったのでメモ。
MS公式でIEとかEdgeとかの入ったVMイメージを配布しています。すごい。(Virtual Machineからいける)
動きがスーパースロー
inputのaccept属性について
input
タグのtype="file
のとき、画像しか受け入れたくないとか、そういう時ありますよね。
accept
属性というのがあって、受け入れるファイルの種類を指定できるようです。
詳しくはこちら。
一見便利そうなのですが、Can I useで確認すると
https://caniuse.com/#feat=input-file-accept
Edgeでは使用できない模様。なので、ご操作防止の気休めくらいで使うのが良さそうですね。
ブラウザ間で挙動が違うこともわかりました。
手元の環境で試した感じは以下の通り(accept="image/*"
を指定)
- Mac Chrome -> 画像のみが選択できる状態でファイラが開くが、ファイル形式をプルダウンで選択できるので画像以外を投稿することも可能
- Mac FireFox -> Chromeと同様の挙動
- Windows7 IE11 -> Chromeと同様の挙動
- Mac Safari -> 画像以外選択できない
- iOS Safari -> 画像以外選択できない(iCloud Driveも開けるが画像しか選択できない)
- iOS Chrome -> 画像以外選択できない(Google Driveも開けるが画像しか選択できない)
これを頼りにするのはやめたほうがよさげ。
雑談
久しぶりにコード書くとたのしいですなぁ。
しかしありとあらゆるタスクが積み上がっており時間が無。
iterator作った #82
今日やったこと
iteratorつくった
iteratorよくわからなかったので実際に書いてみました。急ぎでドカドカ書いただけなので汚い…。
// 配列作ってiteratorで全件console.log const products = ['iPhone', 'iPod', 'iPad', 'Mac', 'AppleWatch'] const productsIterator = products[Symbol.iterator]() let currentProduct = productsIterator.next() while (!currentProduct.done) { console.log(currentProduct.value) currentProduct = productsIterator.next() }
まずは普通に配列をiteratorで回してみた。
まぁJavaとかで触ったiteratorと同じ印象。というかどの言語で書いたってこうなるよな、と言う感じ。
次はiterableなクラスを書いてみた。
// なにかしら商品の在庫を配列で保持するみたいな想定のクラス class Stock { constructor () { this.stocks = [] } add (productName) { this.stocks.push(productName) } // iteratorの実装 [Symbol.iterator] () { let currentIndex = 0 return { next: () => { if (this.stocks.length <= currentIndex) { return { value: undefined, done: true } } else { return { value: this.stocks[currentIndex++], done: false } } } } } } const myStock = new Stock() myStock.add('AppleWatch') myStock.add('iMac') for (let item of myStock) { console.log(item) }
カンタンですね。やっぱり読んでいてよくわからない時は書くに限りますね。いい感じ。
ES6を書くのに必要だったのでES6 → ES5なテンプレ的なのを作った
腐るほどありそうですが…。
npm run build
でsrc配下のファイルをトランスパイルしてbuildに出力するだけです。
…これわざわざテンプレとか作る必要ない気がするw
雑談
埼玉の山奥にかき氷を食べに行ってました。
オール下道で秩父まで…。
新型フリードちゃん pic.twitter.com/H1Vm9RLYnj
— ううたろ (@uutarou10) 2017年8月3日
近くのカーシェアステーションに入った新型フリードに乗っていきました。
Honda SENSINGとかいうのがついてて、自動車専用道路とかでは車線認識して勝手にハンドルを切ってくれたり、メーターパネルには前方のカメラで認識した交通標識の情報が表示されたりしてすごかったです。
こういう最新装備たくさんのクルマ大好き。
なんかすごかったです。量多いけど…
試験終ったので今日から勉強祭りです #81
今日やったこと
JavaScriptのお勉強
オライリー進めてます。
オブジェクト指向のところに入ってきて、prototype
とかの意味とか改めて読んで「へぇ…」とか言っています。
インターンまでになんとしても終わらせるぞ…!
ThetaのAPIを叩いた
RICOHのThetaってあるじゃないですか。
研究室に転がっていたので(しかも最上級のS)APIを叩いて遊んでいました。
FWが古くてうまくいかなかったのですが、本体にWebサーバーを内蔵していて、curlとかからHTTPリクエストを投げるとシャッターを切ったり各種設定を変更したりといったことができます。
こちらはまだ試していないですが、USB接続するとWebカメラとして使用することもできるっぽいです。
雑談
研究室のThetaで遊んでたら楽しくなってしまって買いました…。
ES6+ReactなElectron環境構築やってみた #79
今日やったこと
2科目試験でした。
1日空いて明後日が最終試験日です。
明日がおやすみなので少し趣味のコードを書きました。
ES6 + React + Electron
React使ってElectronのアプリを書きたくてですね…。そうなったら当然ES6が使いたくてですね…。
いきなりやり始めてもいろいろつまづきそうだったので、最初にテンプレみたいなものを作りました。
(すでに探せばそのようなテンプレートはたくさん出てくるのでそれを使えばいいのですが、最低構成で作り始めたかったのと、お勉強の為にイチから作ってみました。)
絶賛作業中ですがとりあえず起動するところまでいったので残りは明後日試験が終わってからにしたいと思います。
こんな感じ、Hello Electron!の文字はReactで出力しています。ヤッタネ。
gulpfileが明らかにおかしくてライブリロード効いてないのでその辺を明後日は直したいですね。
雑談
普段Reactのアプリ書くときcreate-react-app
ばっかり使ってたので、JSXをトランスパイルする環境をイチから作るの新鮮というか、ちょっとつまづきました。
すこ〜しだけJavaScriptの本を進めました #78
今日やったこと
すこ〜しだけJavaScriptの本を進めました。
今日は試験初日「画像情報処理」でした。
ノーコメントです。
明日も試験なので少しだけ例のオライリー本を読み進めました。
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
配列のあたり。find
とかfindIndex
なんてのは初めて知りました。便利。
ついうっかり何でもかんでlodashとか使ってしまいたくなるんですが、標準で実装されているものは使った方が良いですよね…よね?(わからん)
明日は「OS概論」です。一夜漬けします。
雑談
早く試験終わってくれ〜〜〜…。
試験自体は8月3日で終了予定です。1年の頃に比べたら試験の数減ったよね。
進捗ダメです… #77
今日やったこと
JavaScript総ざらいの続き…のつもりだった
絶賛試験勉強中です。
一昨日くらいから続けて書いてるJavaScript総ざらいの続きをやろうと思って読み進めていたのですが、内容が配列とかマップとかその辺に入ってきて、徐々にあやふやな箇所が多くなってきたのであえて進めるのはやめておきました。
ここをてきとうに読み流すと後で後悔しそうなので…。
concat
とか以前使ったメソッドも案外正しい動作知らなかったりするので、自分もまだまだだなぁと思ったりしてます。
試験終わったら一気に進めるぞ…!
雑談
なかなか試験つらい