HTML5」カテゴリーアーカイブ

Yosegakkyにジョジョ風味を加えてみる

投稿日:

メメタァ

というわけで、GWが終わりますね。どう過ごされましたでしょうか。
僕は、おチビさん二人を引きずり回し(回され)ながらGWを過ごしました。

そんなどうでもいい事はさておいて、いきなりメメタァとわけの分からない言葉で始まりましたが、知っている人には当たり前?のフレーズですよね。

そうです、これは「ジョジョの奇妙な冒険」に出てくる有名な擬音語です。
メメタァとは (メメタァとは) [単語記事] – ニコニコ大百科
(僕は、ぶっちゃけ何を意味しているのか全くわかりません)

さて、なぜこんな事を書いたかというと先日書いたYosegakkyで送別した人がジョジョ好きだったんですね。
で、まぁ、普通のやつじゃあつまらないと、なんとかジョジョ風味を出したいと、いきり立ちまして少しジョジョ風味を出して披露してみましたよ。と、そんな事を少し書きます。

とりあえずこんなやつ作った

https://shimabox.net/labs/yosegakky_jojo/

特徴

  • ジョジョフォントをタイトルとローディング部分で使っている
    • それだけ
  • ジョジョフォントは以下2つを使っています
  • これらのフォントを使用する場合、各フォントの使用規約に注意してください

続きを読んでみようかな…

簡易寄せ書きツール(Yosegakky)を作った

投稿日:

というわけで、簡易寄せ書きツールを作成/公開しました。

shimabox/yosegakky

これは何?

  • 簡易寄せ書き作成ツールです
  • download したら簡単に寄せ書きっぽいものを作れる様にしたつもりです
  • そのため昨今のビルドツールは使っていません 僕が使えません
  • ローカルで動くので寄せ書きのメッセージなどを設定したら、みんなで見たりとか、zipなんかにしてプレゼントしたりとかそんな感じです

デモ

demo1 こんな感じです。

どうやって使うの?

Yosegakky – 簡易寄せ書き作成ツール に色々書いています。

続きを読んでみようかな…

WebWorkersを使う時Worker側のonmessageにvarを付けるとChromeで動かない

投稿日:

5歳になる長男が一人でお風呂に入れるようになりました。
チャレンジチャレンジと言いながら。
そうやって大人になっていくんだなぁと、秋の黄昏と共に切なくなった今日この頃です。

さて、今日はタイトルの通り
WebWorkersを使う時Worker側のonmessageにvarを付けるとChromeで動かない
という事象に出くわしたのでメモっときます。

いきさつ

前作ったbase64 encoderを久々に見てみたら、chromeで動かない。safariでは動く。IE10でも動く。
なんぞこれだったので、ちょっとソースを見直してみた。

2015-10-08 追記

確認した所、IE10、IE11も動きませんでした。。下記でChromeだけ動かないって書いている箇所は全てIE10、IE11も該当します。Chrome様ごめんちゃい。

動かなくなってた原因

原因はちょっと腑に落ちないんだけど、Web Workersを使う時worker側に書くonmessage関数をvarつきで宣言していたからっぽい。※タイトルの通りです。何度もすいません。

動かなかったworker

var onmessage = function(e) {
  // do something...
};

動いたworker

onmessage = function(e) {
  // do something...
};

前にweb workersを試した時、chrome ver.27 で確かに動いていたので、現在のver.45までの間に動かなくなった様ですネ。
※直したソースはこちら shimabox/base64Encoder

そもそもWeb Workersって何?

そもそもWeb Workersってなんなのって話ですが、https://developer.mozilla.org/ja/docs/Web/Guide/Performance/Using_web_workersから引用させて頂くと

続きを読んでみようかな…

Backbone.jsとFileAPIとWebWorkerと

投稿日:

生ぬるいですね。こんばんは。

さて、Backbone.jsで少し書いて見たに引き続きこんなのも書いてみました。

ドロップした画像や、選択した画像をbase64エンコードする

Base64Encoder
Backbone.js(Underscore.js)とHTML5のFileAPI、WebWorkerを利用しています。
重い画像をUPしたりゴニョゴニョしても、ページの固まった感が出ない様に心がけたつもりです。
スマホでも見れます(bootstrapさまさまや!iPhoneしか見てないけど、、)。
続きを読んでみようかな…

HTML5のdatasetをsmartyで扱う時のメモ

投稿日:

以下の記事を見て、HTML5のdataset超絶便利だなと思い実際に使おうとしたらsmartyで書く時に一瞬詰まったのでメモ。
最初に断っておきますが、超基本的な事です。

独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP
意外と要注意 HTML5データ属性とjQuery Data APIの関係まとめ

続きを読んでみようかな…

Microsoftの翻訳APIを試してみた

投稿日:

1年程前にHTML5の音声入力とGoogle翻訳APIを使ってこんなのを作ってみたけど、
HTML5の音声入力とGoogleの翻訳APIを試してみた | Shimabox Blog
Google翻訳APIがフリーで使えなくなっていて全然動かなくなってた。。

※参考記事
Google Translate API v2 有料化と v1廃止に伴って、Microsoft Translatorを使って見る余地はあるかもという話 – くるえるはてなくしょん

いやぁ〜、何というファ○ク。でもまぁ、そのままにしとくのも悔しいので、
こちらの記事にある通りMicrosoftの翻訳APIを試してみる事にしました。

続きを読んでみようかな…