blog.tnker.com

Linux系のChromeで大量のGETリクエストが保留中でスタックする問題

tnker

ものすごく久しぶりのエントリ

とあるWebアプリの開発でdevモードで動かした場合にいろんなモジュールを引っ張ってる都合上、アプリケーション起動時に1000リクエスト以上のGETが走るようなアプリケーションを作っていたのだが

ある日を境にアプリケーションが起動しなくなる

とても困った。

諸事情により開発マシンをMacからUbuntuに移行してしばらく開発していたのだが、とあるひ急にアプリケーションが立ち上がらなくなった

立ち上がらない原因に関しては、表題にもあるとおりアプリケーション起動時のリソース取得リクエストが一部「保留中」のステータスのまま返ってこずスタックしているような状態になっている

Webサーバー側のログを見ても該当リソースを200番で返してるし、実際のリソースに直接アクセスすればちゃんと表示される

FFでは再現せず、Chrome（とEdge）で起きるのでWebkit絡みのなんかなのかなぁと思いとりあえずググる

同じ事象起きてる人おった

HTTP requests stuck in Pending state when using Vite

viteのモジュール大量に読み込んだ場合にLinux環境のChromeで発生しているっぽく、思いっきり同じ事象

原因

ホスト環境の一度に開けるファイル数制限に引っかかりスタックしているとのこと
Chromeとかに関しては特別なにかしてないと並行して一気に取得しにいくっぽいので、その際に制限に引っかかるとスタックするっぽい

事象が再現する環境で試しにdevツール上のスロットリング設定で低速とかにしてファイル取得を極端に遅らせたりすると正常に開けたりした

FFで再現しないのは単純に並行して取得しに行く本数が少ないとかな気がするので、ほっとけばそのうちFFでも発生しそうな気はした

修正方法

ホストOS（今回の場合はUbuntu）の同時に開けるファイル数の設定値を増やす

対象ファイル（元ファイル）

/etc/systemd/system.conf /etc/systemd/user.conf

上記対象ファイルに以下設定値を追加
※コメントアウトされている場合はコメント外して値追記でも可
※設定値については元記事の値を一旦そのまま引用

DefaultLimitNOFILE=65536

元ファイルを直接編集したくない場合は、差分で適用することも可

対象ファイル（差分ファイル）

/etc/systemd/system.conf.d/custom.conf

confファイルがなければ作成して以下追記
※ 既にあるなら DefaultLimitNOFILE を追記

[Manager] DefaultLimitNOFILE=65536

ファイル追記が完了したら、ログオフしてログインし直せば反映されてるはず
※されないケースもあるみたいなのでその場合は再起動

DefaultLimitNOFILE について

設定値の内容自体は最大ファイルオープン数
コロンで区切って書けばソフトリミットとハードリミットで分けて定義できるっぽい

DefaultLimitNOFILE=[ソフトリミット数]:[ハードリミット数]

今回は開発環境なのでざっくり指定

いじょーう

Sencha Advent Calendar 2015 - 12月20日 Ext.Editorで編集可能な簡易帳票を最速で作る

tnker

超遅くなりました。ごめんなさい。
今回のお題は、あんまり表に出てこない Ext.Editor たんです。

ExtJS6とか関係ないです。

リファレンスはこちら

http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.Editor

なにやってくれるやつかというと、よくExtJSのサンプルとかをダブルクリックしたりして、入力部品に切り替わって編集出来たりしますが、そんな感じのことをやってくれる偉い子です。

何をしてくれるのかすごくザックリと説明すると、Ext.Editorをあらかじめ用意しておいて、何かしらのアクションが発生した際にそのアクションが発生した要素をEditorに渡すと、その部分を指定した入力部品に置き換えてくれます。

実際に動作するのが下記帳票（と言うなのただのテーブル）の各セルをダブルクリックしてみませう。

項目1	項目2	項目3	項目4
データ1-1	データ1-2	データ1-3	データ1-4
データ2-1	データ2-2	データ2-3	データ2-4
データ3-1	データ3-2	データ3-3	データ3-4

編集できましたかね？

ちなみにEnterで確定したりして、初期状態から内容が変更になった場合は赤くなるようにしています。

こんなことが出来るのが Ext.Editor です :)

で、実際のコードを見ていくと。
まずは、帳票部分のHTMLは

HTMLコード

<table id="example-table">
    <thead>
        <tr>
            <th>項目1</th>
            <th>項目2</th>
            <th>項目3</th>
            <th>項目4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1-1</td>
            <td>データ1-2</td>
            <td>データ1-3</td>
            <td>データ1-4</td>
        </tr>
        <tr>
            <td>データ2-1</td>
            <td>データ2-2</td>
            <td>データ2-3</td>
            <td>データ2-4</td>
        </tr>
        <tr>
            <td>データ3-1</td>
            <td>データ3-2</td>
            <td>データ3-3</td>
            <td>データ3-4</td>
        </tr>
    </tbody>
</table>

こんな感じで、何も特殊なことをしていないただのHTMLです。
続いてCSS

CSSコード

<style type="text/css">
#example-table {
    width: 100%;
    color: #333;
    font-size: .95em;
    border-spacing: 1px;
}
#example-table th {
    font-size: 1.0em;
    background-color: #eee;
    padding: 5px;
}
#example-table td {
    font-size: 1.0em;
    padding: 8px;
    border-bottom: 1px solid #f1f1f1;
}
#example-table td:hover {
    background-color: #f5f5f5;
    cursor: pointer;
    color: #3169CB;
}
#example-table td.dirty {
    color: #CC1A1A;
    font-weight: bold;
}
</style>

こちら特殊なことは一切なにもしていないCSSになります。

最後にリソースとして読み込んでいるCSSとJSファイル、編集時の処理を実装してるコードが下記になります。

追加読み込みリソース（CDN）

<script src="//cdn.sencha.com/ext/gpl/5.0.1/build/ext-all.js"></script>
<link rel="stylesheet" href="//cdn.sencha.com/ext/gpl/5.0.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">

JSコード（とその解説）

<script type="text/javascript">
// $(function() {})みたいなもの
Ext.onReady(function() {
    var editor, table;

    editor = Ext.create('Ext.Editor', {
        // 入力部品確定後元の要素を更新するか
        updateEl: true,
        // 編集部品を表示した際にそろえる位置指定（API参照）
        alignment: 'l-l',
        // 入力部品の外枠に影を表示するか
        shadow: false,
        // 入力部品の自動サイズ設定
        autoSize: {
            width: 'boundEl'
        },
        // 編集部品指定（今回はテキストフィールド）
        field: {
            xtype: 'textfield'
        },
        // Ext.Editorに対するイベントバインド
        listeners: {
            // 編集確定時処理
            complete: function(e, nv, ov) {
                // 入力前と後で値が違う場合は、対象要素にCSSクラス付与
                // これで赤文字に変更している
                if (nv !== ov) {
                    e.boundEl.addCls('dirty');
                }
            }
        }
    });

    // 帳票テーブル要素取得（引数ID名）
    table = Ext.get('example-table');

    // ダブルクリック時のイベントバインド
    table.on({
        dblclick: {
            // ダブルクリック時実行処理
            fn: function(e, t) {
                // Ext.Editorに対して操作された対象要素を引き渡しEditor起動
                editor.startEdit(t);
            },
            // イベント対象要素
            element : 'el',
            // イベントを反応させる要素のセレクタ（CSSクラス可）
            delegate: 'td'
        }
    })
});
</script>

コメント入ってますが、こんだけのコードで終わりです。
編集契機を変更したい場合は、dblclick を click とかに変更すれば良いです。

Ext.onReady とか久しぶりに使った
あと実際にやるときは、各関数はちゃんと定義しましょう

HTMLとCSSコードは完全に独立した状態で作れるので、名前とかだけが人によって違う帳票的なものを印刷する手前で、編集出来るようなやつを用意する際にかなりさっくり作れるかと思います。

あとは今回テキストフィールドでやってますけど、同じ感じでコンボボックスとか日付ピッカーだったりも field の xtype 変えてあげれば、同じ用に使えるので結構良いような気がします。

ということで、少し変わったExtJSの使い方のご紹介でした、まる

Sencha Advent Calendar 2015 - 12月13日 vimなお話

tnker

今年もこの季節がやってきましたね。
ということで、今回は ~~Sencha~~ vim のお話です。

Advent Calendarの記事の中にいくつかIDEだったりプラグインの紹介だったりがチラホラありますが、そんな中 vim を使い続ける硬派な方向けのエントリーになります。

tnker/vim-sencha-util

https://github.com/tnker/vim-sencha-util

少し前にSencha用のプラグイン作りました。
GithubのREADMEはBingの翻訳頼りなので、英語おかしいかもですが気にしないように :(

Senchaで一番面倒なコード追う作業を比較的楽にしてくれちゃいます :)

設定方法

プラグインの中身の実装がほぼPythonで実装しているので、Python2.7以上（多分）が必須です。

インストールについては、みんな大好きNeoBundleでOKです

NeoBundle 'tnker/vim-sencha-util'

使い方

このプラグインを使うに当たって、Sencha Commandで生成されたプロジェクトが前提になるので注意してください :(

あとは、xtypeから該当ファイルへジャンプしたりする機能を利用する場合、Sencha Commandでビルドもしくは sencha app refresh などを行う必要があります。

プロジェクト直下の bootstrap.json を参照していたりするので

出来ることは下記の通り

文字列定義で記述されているフルパスクラス名から該当クラスファイルへジャンプ
リテラル定義内のxtype名から該当クラスへジャンプ
リテラル定義内のhandler等に設定されている文字列関数名から該当関数までジャンプ
MVVMの構成に合わせてファイルをトグル切り替え

一番最後の機能については、ファイル名の命名規則しばったちょうザックリ機能なので、使えるかは微妙です（私は使ってますが

プラグインの機能を利用する際に使うのは、基本的に下記のコマンドだけになります

:SenchaParserReadCurrentLine

微妙といったファイルのトグル切り替えについては下記

: SenchaMVVMToggle

文字列定義で記述されているフルパスクラス名から該当クラスファイルへジャンプ

リテラル定義内のhandler等に設定されている文字列関数名から該当関数までジャンプ

ExtJS6のclassicとmordenパッケージの名前解決も一応対応はしていますが、ちょっとまだバギーかもしれないです :(

リテラル定義内のxtype名から該当クラスへジャンプ

MVVMの構成に合わせてファイルをトグル切り替え

これについては、該当ファイルに設定されているViewControllerとViewModelの解析を行っているわけではなく、単純に該当ファイルと同ディレクトにおいてあるファイルを下記のルールで検索し、マッチするファイルがあればトグルで切り替えているだけになります。

対象ファイルが Hoge.js の場合
Hoge.js
HogeModel.js
HogeController.js
というような感じで、ModelとControllerが後ろについているか検索してるだけです

vimrc には下記みたいな感じで、マッピング追加しておいてもらえれば簡単に使えるので比較的便利です :)

map <silent> <C-@> :SenchaMVVMToggle<CR>
map <silent> <C-f> :SenchaParserReadCurrentLine<CR>

と、思いっきり宣伝紹介記事になってしまいましたが今回はこの辺で :)

今気づいたけど、12日分がまだ上がってなかった！
Unoくんガンバ！:(

SenchaTouchで既存アプリのUIを真似てモックアプリ実装する遊びをしていた

tnker

こんばんわ。

Sencha TouchがExtJS6で統合されたのにも関わらず、積極的にSencha Touchを書いている私です。

サンプルがてら既存アプリのUIをTouchで書いてたりしたけど、若干飽きてきたのでとりあえず、アウトプットして他のことしようと思う。

サンプルページ

http://touch.tnker.com/

作りたい部分だけ作ってるだけなので、完成度はお察しです
あと、所々ボタン押下した際に表示されるサイドのメニュー一覧は気にしないでね:)

ということで、python・scala・swiftあたりで遊ぶことにします。

気が向いたらまたなんか作って追加すると思います。

そにアニOPが若干ノリノリになるかもしれない（マイク入力ONにしないと意味分からないエントリです）

tnker

なんとなくAudio API触ってみたくてやってみた

あとでお復習いがてらまとめようと思う。
とりあえず音声データを数値化するにはAnalyzerを通してあげれば、渡した音声データの波形データを取得できるみたい。

んで、youtubeの動画をいい感じになんかしたかったけど、音データを抜くのは無理だし色々考えるのが面倒だったのでスピーカーから再生した音をマイクで拾うという暴挙に出てます。

なのでマイク入力無いPCの人はそっとブラウザと閉じてください。

スピーカーからの音声をマイクで拾ってます

なので、ヘッドフォンとかで聞いててもあんまり面白くないと思います。
自分で合いの手入れてくれれば大丈夫です。

ブラウザ上部にマイク入力のアクセス許可出てくるので「許可」してから再生してみてね

いかんせん、マイクから音拾ってるので周りうるさいと余計に動きます ;(

参考サイト

波形描画 | サウンドの視覚化 | WEB SOUNDER - Web Audio API 解説
http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-visualization/draw-wave