ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

時、分を個別に入力できる時間入力コントロール(コンポーネント)(TimePIcki)

JavaScript jQuery

本記事では、時、分を個別に入力できる時間入力コントロール、
TimePickiについて紹介していきます。

本記事の内容です。

TimePIckiとは？

jQueryのTimePIckierプラグインです。
公式ページに実際に動作するデモがありますので、
触って感触を掴んでみてください。
senthilraj.github.io

ライセンス

MITライセンスです。
github.com

使用するための準備

jQueryのプラグインですので、jQueryが必要です。
下記のページからダウンロードしてください。
jquery.com

TimePIckiは下記ページからダウンロードできます。
jsファイルやcssファイルだけでなく、
imagesフォルダも必要になるので、jsファイルを保存する
フォルダと同階層にimagesフォルダをコピーしてください。
github.com

サンプルコード

HTML

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
    <link rel="stylesheet" href="css/timepicki.css" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/timepicki.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <input type="text" id="timepicker">
</body>
</html>

JavaScript

$(function() {
    $('#timepicker').timepicki(); 
});

使い方

公式ドキュメントが下記ページにありますので、参照してください。

使い方
TimePicki - how to use jQuery Timepicker

使用できるオプション
TimePicki - use options in jQuery timepicker

Deferredのthen、done、failでハマったこと(jQuery)

jQuery

本記事では、jQueryのDeferredを使用する際、
then、done、failでハマったことを紹介していきます。

本記事の内容です。

Deferredって何？

本記事で説明すると長くなってしまうので、
下記のページを参照してください。
簡単に説明しますと、「非同期処理を良い感じに行う仕組み」です。
techblog.yahoo.co.jp
qiita.com

何でハマったのか？

以下のコードで処理が思った順番に実行されない。
doneHogeとfailHogeが両方、一気に実行されてしまう。

$(function() {
    $('#button').click(function() {
        $.get({
            url: '何かしらのurl'
        }).done(doneHoge()).fail(failHoge());
    });

    function doneHoge(data, textStatus, jqXHR) {
        alert('Done!');
    }

    function failHoge() {
        alert('Fail...');
    }
});

何が駄目だったのか？

then、done、failは、あくまでも引数の関数を登録するだけなので、
引数で渡す時に"()"を付けてしまうと、
渡している関数が即時実行され登録されない。
上記から、関数の後ろに"()"を付けずに、引数で渡さなければいけない。

修正後のコード

修正コード1は、関数を即時実行させずに情報を渡し登録させるパターン。

修正コード1

$(function() {
    $('#button').click(function() {
        $.get({
            url: '何かしらのurl'
        }).done(doneHoge).fail(failHoge);
    });

    function doneHoge(data, textStatus, jqXHR) {
        alert('Done!');
    }

    function failHoge() {
        alert('Fail...');
    }
});


修正コード2は、関数を即時実行するが、
即時実行した関数から登録する関数を返してあげるパターン。
こちらはコードが長くなるが、細かいことが行える。

修正コード2

$(function() {
    $('#button').click(function() {
        // $.get({
        //     url: '何かしらのurl'
        // }).done(doneHoge).fail(failHoge);
        hoge().done(doneHoge()).fail(failHoge());
    });

    function hoge() {
        var defer = $.Deferred();
        // なにかしらの処理を行う
        if (/* 何かしらの条件 */) {
            // 呼び出し元に処理が成功したと伝える
            defer.resolve();
        } else {
            // 呼び出し元に処理が失敗したと伝える
            defer.reject();
        }
        // promiseを作って返す
        return defer.promise();
    }

    function doneHoge(defer) {
        return function (data, textStatus, jqXHR) {
            alert('Done!');
        }
    }

    function failHoge(defer) {
        return function () {
            alert('Fail...');
        }
    }
});

最後に

コードではthenについて触れませんでしたが、
thenもdoneおよびfailと同じです。

Handsontableで列を非表示にする(非表示列を持たせる)

JavaScript

本記事では、Handsontableで列を非表示にする
(非表示列を持たせる)方法を紹介していきます。

本記事の内容です。

Handsontableって何？

下記の記事を参照してください。
j-levia.hatenablog.jp

サンプルコード

非表示にしたい列の幅を0.1に設定することで、
非表示列にしています。
実際に列幅は、0に設定されます。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
    <link rel="stylesheet" href="css/handsontable.full.min.css" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/handsontable.full.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

$(function() {
    var data = [
        {
            name: '佐藤', age: 28
        },
        {
            name: '鈴木', age: 19
        },
        {
            name: '田中', age: 25
        }
      ];

    var columns = [
        {
            data: 'name',
            type: 'text',
            width: 100
        },
        {
            data: 'age',
            type: 'text',
            width: 0.1 // 幅に0.1を設定することで非表示列にする、実際には0が設定される
        },
    ];
      
    var grid = document.getElementById('grid');
    
    new Handsontable(grid, 
    {
        data: data,
        columns: columns
    });
});

過去に流行ったズンドコキヨシを求人サイト「バニラ」で実装してみた(n番煎じ)

.NET C# ネタ

過去に流行った、下記ページのやつを求人サイト「バニラ」で置き換えてみました。
qiita.com

本記事の内容です。

何故、実装しようと思ったのか？

2017/11から仕事でC#を触れることがなくなり、気が触れた。
ついカッとなってやった。後悔はしていない。

何故、求人サイト「バニラ」をネタにしたのか？

最近、自社周りでよく走っており、
そのキャッチ―なメロディが頭から離れなかったから。

求人サイト「バニラ」とは？

風俗の求人サイト。
qzin.jp

よく、下記動画の曲を流しながら街中をトラックが走っている。
そのキャッチ―なメロディが頭から離れない人が多いとかなんとか。
www.youtube.com

実装したコード

using System;

namespace VanillaKyujin
{
    class Program
    {
        static void Main(string[] args)
        {
            var words = new String[] { "バーニラ", "バニラ", "バーニラ求人" };
            var pattern = "バーニラバニラバーニラ求人バーニラバニラ";
            var random = new Random();
            var vanillaStrBuf = "";
            while(true)
            {
                var randomNumber = random.Next(3);
                vanillaStrBuf += words[randomNumber];
                if (vanillaStrBuf.IndexOf(pattern) > -1)
                {   
                    Console.WriteLine("{0}高収入～", pattern);
                    break;
                }
            }

            Console.ReadKey();
            Console.WriteLine("Any press key...");
        }
    }
}

JavaScriptでExcelライクなグリッドを使う(Handsontable)

JavaScript

JavaScriptでExcelライクなグリッドを使用するための
ライブラリである、Handsontableについて書いていきます。

本ブログの内容です。

Handsontableのダウンロード

以下のページからソースコードをダウンロードしてください。
使用するファイルは、distフォルダの中に入っています。
github.com

ライセンス

MITライセンスです。
github.com

サンプルコード

サンプルコードにjQueryを使用していますが、
HandsontableがjQueryに依存しているわけではないです。

HTML

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        
    <link rel="stylesheet" href="css/handsontable.full.min.css" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/handsontable.full.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

JavaScript

$(function() {
    var data = [
        ['佐藤', 28],
        ['鈴木', 19],
        ['田中', 25]
      ];
      
    var grid = document.getElementById('grid');
    
    new Handsontable(grid, 
    {
        data: data
    });
});

使い方

公式ドキュメントと、有志の方が書かれた日本語情報のページを紹介します。

公式ドキュメント

Handsontable - Tutorial: Introduction

日本語情報

Handsontable 使い方メモ１（基本）
Handsontable 使い方メモ２（グリッドのオプション）
Handsontable 使い方メモ３（カラム・セルオプション）
Handsontable 使い方メモ４（メソッド）

気になった記事メモ

雑記

API

Zalando RESTful API と イベントスキーマのガイドライン

アニメーション

カッコ良すぎる！CSSとJavaScriptで作られた真似してみたいアニメーションロゴ10選 - Web Design Facts
実装がどんどん簡単になっている！スクロールに連動するCSSアニメーションを与えるスクリプト -Delighters | コリス

JavaScript

JavaScript の async/await の仕様をずっと誤解していた

Docker

「Dockerによるアプリケーション開発環境構築ガイド」はプロのエンジニア必読の一冊だ（断言） - Lean Baseball

工数見積り

工数見積もりのコツ

英語

プログラマのための「英語でググる技術」｜英語で最新情報を手に入れよう – Crowdtech SQUARE［クラウドテック スクエア］

フリーランス

フリーランスに月10万の仕事保証——ランサーズが｢ベーシックワーク｣実験をスタート | BUSINESS INSIDER JAPAN
フリーランスエンジニアが仕事を増やすには、やっぱり技術ブログが良い | フリーランスumentuのサイト
続・フリーランスエンジニアが仕事を増やすには、やっぱり技術ブログが良い | フリーランスumentuのサイト

フリーランスが加入できる健康保険について

フリーランス 保険

フリーランスが加入できる健康保険について調べたので、
いろいろとメモがてら残しておきます。

お品書き。

フリーランスが入れる健康保険の種類

以下の3種類があるようです。

以下で、それぞれについて説明していきます。

国民健康保険

加入するのに特に条件の無さそうな一般的な保険。
手続きの提出期限が
退職した翌日（社会保険の喪失日）から14日以内
なので、要注意ですね。

任意継続被保険者制度

退職してからも在職中と同じ健康保険に引き続き加入でき、
同様の被保険者資格を保持し続けることができる保険。
これは手続きの提出期限が
退職後20日以内
なので、国民健康保険よりはちょっと緩い。
でも、会社を辞めた人のみが受けられる特権みたいなものなので、
誰でも入れるわけではないです。

健康保険組合

決まった職業に従事する人が加入できる限定された健康保険。
これは
文芸美術国民健康保険組合
に加入するのがよくあるパターンみたいですね。
加入条件は、職業欄に「WEBデザイナ」と書いておき、
後は作成物(成果物)があれば良いみたいです。
こちらの手続きの提出期限は無い模様。

どれがお得か？

ざっと調べていると
健康保険組合 < 任意継続被保険者制度 < 国民健康保険
の順に安いという様に書かれている記事が多いですね。

ですが、上記の健康保険組合に入るパターンだと、
健康保険自体は安くても、個人事業税が掛かるため、
トータルでは任意継続被保険者制度とあまり変わらなくなることもあるようです。
ちなみに、個人事業税については、
「個人事業税 [住んでいる都道府県名]」
で検索を行えばヒットします。
WEBデザイナはデザイン業にあたるようです。
SEやプログラマも、ソフトウェアを製造するという認識で
製造業にあたるかもしれないとかいう話もあります。
上記を踏まえ、任意継続被保険者制度が一番安いかといえば、
国民健康保険の方が安いパターンもあるとかなんとか。

結局、どれが一番良いのか？

自分で調べて比較し、一番安いのを選びましょう。
任意継続被保険者制度と国民健康保険の比較については、
市役所(区役所)の窓口へ行けば、どちらの方が安いのか
教えてもらえるみたいです。

参考にしたページ

独立する際、ITフリーランスが加入できる健康保険まとめ｜フリーランスITエンジニアの案件・求人【geechs job(ギークスジョブ)】
フリーランスの個人事業税は『誰がいつ誰にいくらどのように』納めるの？ | 融資×経理でシゴトを強く｜モロトメジョー税理士事務所 | 横浜
個人事業税 - 愛知県