サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
geta6.hatenablog.com
Reactで動的に出現する要素をDOM量抑えながら実装する。たとえばドロップダウン。 画面内に一個だけしか出現しないユニークな要素であれば、stateとcssでなんとかなると思う。 handleDropdownToggle = () => { this.setState({ dropdownVisible: !this.state.dropdownVisible }); }; render = () => ( <div> <button onClick={this.handleDropdownToggle}> 俺をクリックすると </button> <div className={this.state.dropdownVisible ? 'visible' : ''}> 俺がみえるぞ! </div> </div> ); ただ下記のような要件が出てくると、この実装だとマズそうな気配が強くなる
electronをcommonjsモジュールとして追加してあげる必要がある。 最初、何を思ったのかexternalとかIgnorePluginとかで無視しようとして時間を浪費したのでメモ。 NG export default { plugins: [ new webpack.IgnorePlugin(/^(?:electron)$/), ] } NG export default { externals: ['electron'], } OK export default { plugins: [ new webpack.ExternalsPlugin('commonjs', ['electron']), ] }
最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"
gulpはstream志向でデザインされていて、streamしか受け入れない・streamじゃないとon the railじゃない、というようなイメージが強いと思う。 ところがどっこい、gulpのタスクが受け入れるのはstreamだけじゃないし、必ずしもgulp-*とかvinylとかを使わなければならない理由も特に無い。それらを使わなくてもタスクは実行できる。 「stream使わなくてもいいじゃん」と割り切ると、gulpの使い途が広がる。 一応挙げておくと、例えば下記のコードは正しいタスク。 gulp.task('synctask', () => { console.log('sync task executed.'); }); 非同期であれば下記のように書ける。 gulp.task('asynctask', done => { setTimeout(() => { console.log
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
ネット同人音楽即売会APOLLOが開催の運びとなりました。 早速楽曲を買ったんですが、購入した曲をダウンロードする時に一個一個ばらけてて非常にめんどくさい。 なので、これをまとめてダウンロードできるようにするボタンを購入後ページに表示するchrome拡張を作りました。 Apollo Booster - Chrome Web Store 使い方は簡単、インストールしてから下記いずれかの注文後商品ダウンロードページを開くだけです。 購入後のチェックアウト画面 購入商品一覧 はかどる。
opencvで顔を検出して切り抜き、Glitchフィルタをかけた後にimagemagickで合成して出力する。 きっかけ: twitter@9m できたの: geta6/flitch 元の写真 Google Image Searchでfaceで検索した様子。 検出状態 ellipseしてみた。 処理後 概ね望んだ通りの結果が得られた。 清く正しく美しく画像を破壊するのは難しい。 現在はbase64に変換して1をBに書き換えてbinaryに書き戻しているので、ほぼ全ての領域で正しく破壊できているが、何回やっても結果は変わらない。 当初はbyteArrayにしてランダム箇所にランダム値を~255で突っ込む、という適当実装だった。成功すればとても美しく破壊できるのだが、失敗すると画像フォーマットそのものを破壊してimagemagickから無視されるので、やめた。顔が検出されてないみたいでかっこ悪
ためにいろいろと調査した結果ログ。 UIWebViewでつくるUI よくまとまってた。 長押しでの選択を無効にする CSSでハンドルする。 -webkit-touch-callout: none; -webkit-user-select: none; overflow: scroll;な要素でスムーズスクロール・バウンスを有効にする -webkit-overflow-scrolling: touch; ピンチでの拡大を停止する <meta name='viewport' content='initial-scale=1,userscalable=no'> Retina用のスタイルを定義する @media only screen and (-webkit-min-device-pixel-ratio:2) { } リファレンスの.htmlを[UIImage imageNamed:]みたく検索
このページを最初にブックマークしてみませんか?
『geta6.hatenablog.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く