投稿

JavaScript 非同期処理 Promiseをループする

JavaScriptで複数のリソースの読み込みやWebスクレイピング等によるリソース取得時に「XMLHttpRequest」を使い非同期で読み込みたい時があります。 最近ではPromiseで非同期処理をするのが一般的ですが`for`の中にPromiseを入れても意味がありません。 ``` for(i=0; i { setTimeout(()=>{ console.log("foo"); return resolve(); }) }) } console.log("bar"); ``` #### Output ``` bar foo(10) ``` この様にPromise自体は実行されますが、forの中身が実行されている間に次の`console.log("bar");`が実行されてしまいます。 ## 解決方法 条件が合うまで同じ関数を呼び出す方式でループを実現します。 ``` function PromiseLoop(a, c, b = 0){ if(b >= a){ return Promise.resolve(); }else{ return c(b).then(()=>{ return PromiseLoop(a, c, b + 1); }); } } ``` * a : 繰り返し回数 * c : 関数 (戻り値は`Promise.resolve()`である必要がある) * b : 条件初期化 引数`c`にはreturnに`Promise.resolve()`を返す必要があります。 Promiseを返さないと`then()`で次の処理が動きません。 ``` return c(b).then(()=>{ return PromiseLoop(a, c, b + 1); }); ``` 引数`b`は特に指定が無い限り初期値を`0`に初期化します。 これは省略可能な引数です。 ## 使用例 これは関数を10回繰り返すサンプルです。 ``` Promise...

Qt TableView

イメージ
# QtのTableViewの最もシンプルな例を紹介します。 QtTableViewはデータをテーブル上に表示するGUIウィジェットです。 主に次の様な手順で使用します。 * TableViewをインスタンスし、用意する * モデルデータオブジェクトを定義する * TableViewの`setModel`メソッドでオブジェクトを渡す ### TableViewのモデルを作成する 今回は配列や構造体を用意せず、単純に振る舞いを見える様にしたサンプルを作りました。 TableViewにデータを表示するにはモデルが必要になります。 モデルを作成するには`QAbstractTableModel`を継承したクラスを定義し`TableView::setModel()`に渡す必要があります。 ``` #include #include class mydata : public QAbstractTableModel { Q_OBJECT public: explicit mydata(QObject *parent = nullptr); virtual ~mydata() override; }; ``` TableViewの`TableView::setModel()`にセットされたオブジェクトはTableViewから次のメソッドが呼び出される為オーバーライドして定義する必要があります。 ### 必要なメソッド * `columnCount()` 列数を返すメソッド * `rowCount()` 行数を返すメソッド * `data()` 要求データを返すメソッド * `headerData()` ヘッダーを返すメソッド ※今回のサンプルは配列や構造体を使わず振る舞いを知る為の例ですので、実用するには`addData()`等オブジェクト内でデータを管理するプログラムが必要になります。 ## メソッドを定義する ### mydata.h ``` #include #include class mydata : public QAbstractTableModel { Q_OBJECT public: explicit mydata(QObject *parent = nullptr); ...

Qt SQLite データ書き込み

イメージ
## ※ 現段階では書捨てです。後日正しく直します。 .pro ファイルにsqlを追加 ``` QT += core gui sql ``` ## UIの構成 VBoxLayoutにQTextEditorとQPushButtonを追加したシンプルなUIです。 ## メインコード ``` #include #include #include #include #include #include #include #include #include int main(int argc, char *argv[]) { QApplication a(argc, argv); // GUI 初期化 QWidget *window = new QWidget; QVBoxLayout *MainLayout = new QVBoxLayout; QTextEdit *Editor = new QTextEdit; QPushButton *Run = new QPushButton("追加"); window->setWindowTitle("SQLite GUI サンプル"); window->resize(500, 500); // Button クリックイベント QObject::connect(Run, &QPushButton::clicked, [=]{ qDebug() toPlainText()); query.exec(); db.close(); }); MainLayout->addWidget(Editor); MainLayout->addWidget(Run); window->setLayout(MainLayout); window->show(); return a.exec(); } ```

ウェブアプリケーション用テンプレートを公開

イメージ
汎用性の高いウェブアプリケーション用HTMLテンプレートを配布します。 # 概要 いいツールやアプリケーションを思いついてもゼロからテンプレートを作るのはとても面倒くさくて途中から投げ出してしまいそうになります。そんな思いを解決すべく、超軽量かつ必要最低限のスタイル定義しかしていないテンプレートを配布します。 |Chrome|Edge|IE|Safari|Opera|Firefox| |------|-----|----|-----|-----|-----| |49|15|✕|9.1|36|31| JavaScriptはネイティブなスクリプトのみ使用しています。 ## 特徴 * メニューはHTML最下部にある軽量なJavaScriptのみを使って展開・縮小する様に設計されています * Flexボックスでレイアウトされた為、従来の手法より軽量かつ柔軟に設計されています * レイアウト・メニューまわりのみのスタイリングで自由度が高いです ## Map ``` . └── src ├── index.html └── resources ├── image │   └── menu_Item.svg └── script ├── app-main.css // メインコンテンツ部分のスタイルシートです ├── app-navigation.css // ナビゲーションメニュー部分のスタイルシートです ├── reset.css // リセットCSSです └── styel.css // 統括してスタイルシートを読み込むスタイルシートです ``` ## 入手 [ダウンロード](https://drive.google.com/open?id=1VQ9uvHB96OMw5MFGv8VdMvues7ftWXta)

[GAS] スプレッドシートの値、取得・書き込みを行う

イメージ
# はじめに GASとは「Google Application Script」の頭文字をとったもので、Googleが提供している各サービスをこのスクリプトを使い、プログラムする事でこれまでになかった機能を作ったり、作業を簡易化する事が出来る様になります。 よく使われるサービスとしては、GoogleDrive ・ Gmail等でしょうか。これらをGASを使ってプログラムを組む事で連携させる事が可能になります。 JavaScriptをベースとしたプログラミング言語で、JavaScriptと言ってもバージョンが幾つかあり、現時点(2019年)でのネイティブはES6ぐらいでの開発が一般的かと思います。 GASではJavaScript1.6を採用している様ですので、使える構文や仕様が限られますが、十分かと思います。また、TypeScriptからコンパイルする事がオススメされています。 # スプレッドシートの基本操作 GAS入門としてはスプレッドシート(Microsoft Excelみたいな物)のコントロールです。 ## スプレッドシートの準備 ### 新規スプレッドシート作成 Google Driveで任意のディレクトリで新規スプレッドシートを作成します。 名前も任意の名前にします。この作成したスプレッドシートを操作するスクリプトを作成して行きます。 ### ボタンを設置する GASではトリガー(Event)があり、スプレッドシートの変更や保存等を感知して発火する仕組みがあるのですが、今回はボタンをクリックをトリガーにしてスクリプトを実行して行きます。 ツールバーから[挿入]→[図形描画]をクリックしてエディターを開きます。 エディターでボタンの様な図形を作成し、スプレッドシートに貼り付けたら準備完了です。 ## スクリプトを作成する ツールバーの[ツール]→[スクリプトエディタ]を開きます。 このスプレッドシートに関連付けられたスクリプトが自動的に生成されます。 ## トリガーを設定する スクリプトエディタを開くと、初期状態で空の`myFunction()`関数があります。この関数にトリガーを設定します。 スプレッドシートに戻り、図形のメニューからスクリプト作成を開きます。 ---- これでスクリプ...

iOS Siriショートカット使い方

イメージ
# Siri ショートカットとは Siri ショートカットはiOSを搭載しているiPhone・iPad等で利用出来るAppleのアプリで、iOS AppStoreからインストール出来ます。 アプリはショートカットを自分で作成する事が出来、用途別にショートカットを起動できます。 img ## 基本操作 ショートカットはアクションを並べる事で作成出来ます。アクションをワークフローに追加すると、上から下に向かってワークフローが処理され、ショートカットが終了します。 イメージとしては巷で話題のビジュアルプログラミングと同じで、MacではSiriショートカットに似たAutomatorが以前からありました。 ## アクション ワークフローにアクションを並べる事で、ショートカットはワークフローの順に処理を進めます。アクションには幾つか種類があり、これらを組み合わせる事で一連の処理を自動化出来ます。 ### アクションの種類 + スクリプティング + コンテンツ + App ・*スクリプティング*は次のアクション類が含まれます。[コメント・結果表示・Shortcuts・X-Callback・コンテンツ・シェル・デバイス・ファイル・リスト・制御フロー・変数・計算・辞書・通知・その他追加リソース] iOSのAPI等使う場合に使います。 ・*コンテンツ*は次のアクション類が含まれます。[App・カレンダー・連絡先・書類・ヘルスケア・自宅・場所・ミュージック・写真とビデオ・共有・テキスト・Web] iOS標準インストールアプリケーションや機能をが利用可能です。 ・*App*にはインストール済みサードパーティ製アプリケーションの利用可能なアクションが利用可能です。 各アクションにはインフォメーションアイコンがあり、タップする事でアクションの詳細な説明や入力・出力等の詳しい説明を見る事が出来ます。 ## 画像と定型文をメールするショートカットを作成 今回は手始めにショートカットを起動すると写真を撮影するだけで定型文と一緒にメールするショートカットを作ってみましょう。 ### 写真を撮るアクションを追加 検索から「写真」と検索すると「写真を撮る」アクションが表示されます。このアクションをワークフローに追加します。 `写真を撮る`では3つのプロ...

Affinity Designer 図形からくり抜きをする方法

イメージ
Affinity Designerのデザイナーペルソナで図形の形にオブジェクトをくり抜く方法を紹介します。 Affinity Designerでは対象図形を任意の図形で自由にくり抜く事が出来、複雑なグループ化した図形も1つの図形としてくり抜く事ができます。 はじめに、長方形と星型の図形を用意し、長方形を対象に、星型にくり抜きます。 くり抜き対象とくり抜きたい図を重ね、両方を選択すると、ツールバーの「減算」が有効になります。 減算をクリックする事で、図形を任意の図形でくり抜く事ができました。