WindowsのカレンダーライクなDatePicker(bootstrap-datepicker)
本記事では、WindowsのカレンダーライクなDatePickerである
bootstrap-datepickerを紹介していきます。
本記事の内容です。
bootstrap-datepickerとは？
Bootstrapを利用したdatepickerです。Windowsのカレンダーライクなdatepickerを使用することができます。
デモページ
下記ページで実際に動作させることができます。Datepicker for Bootstrap
ライセンス
Apache License 2.0です。github.com
使用するための準備
jQueryに依存しているので、jQueryが必要です。下記のページからダウンロードしてください。
jquery.com
bootstrap-datepickerは、デモページ左上のDownloadボタンから
ダウンロードできます。
サンプルコード
HTML<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/bootstrap-datepicker.css" /> <link rel="stylesheet" href="css/bootstrap-datepicker.standalone.css" /> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/bootstrap-datepicker.min.js"></script> <!-- 言語ファイルは、必要に応じて増やす --> <script src="locales/bootstrap-datepicker.ja.min.js"></script> <script src="js/index.js"></script> </head> <body> <input type="text" id="datepicker"> </body> </html>
$(function() { $('#datepicker').datepicker({ // 任意のオプション // デモページ右下のコードをそのまま貼り付ける }); });
使い方
デモページで設定した、ページ右下に表示されるソースコードをそのままコピーして使用してください。
ASP.NET WebAPIで処理されなかった例外をハンドリングし、ログを出力する方法
本記事では、ASP.NET WebAPIで一切処理されなかった例外を
ハンドリング(グローバルハンドリング)し、ログを出力する方法を紹介していきます。
本記事の内容です。
例外ハンドリングクラスを作成する
今回は、GlobalExceptionLogger.csという名前でファイルを作成しています。内容は下記の通りです。
ログ出力は、log4netを使用しています。
using System.Web.Http.ExceptionHandling; using log4net; namespace Hoge.Exceptions { public class GlobalExceptionLogger : ExceptionLogger { private readonly ILog log = LogManager.GetLogger("Error"); public override void Log(ExceptionLoggerContext context) { // ログ出力処理 log.Error(context.Exception); } }
例外ハンドリングクラスをサービス登録する
上記で作成したクラスを、App_Start下のWebApiConfig.cs内でサービス登録します。方法は下記の通りです。
using System.Web.Http; using System.Web.Http.ExceptionHandling; using Hoge.Exceptions; namespace Hoge { public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API の設定およびサービス // Web API ルート config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); // ここで例外をハンドリングするクラスをサービス設定 config.Services.Replace(typeof(IExceptionLogger), new GlobalExceptionLogger()); } } }
退職しました
3年半勤めていた中小SIerを退職しました。
まぁ、正確には06/30付け退社なので、まだ在職扱いなのですが。
本日が最終出勤日でした。
せっかくなので、色々と書いておこうと思います。
在職中は何をやっていたの？
3年半の内、最初の3か月は1か月単位で様々なプロジェクトのアサインされ、その後、3年3か月間、ずっと外へ派遣で出ていました。
行っていた仕事の内容について、ざっくり説明すると
- .NET(C#、VB.NET)を用いたWinFormアプリ、WebService、WebAPI開発
- .NET(C#、VB.NET)を用いたWinFormアプリ開発基盤の構築
- SQL、PL/SQLを用いたDB周りの開発
- HTML、CSS、JavaScriptを用いたWebシステム開発
- 顧客折衝(要件定義)や設計等の上流工程
といった感じでした。
他には、仕様やプロジェクトメンバーを取りまとめて、
プロジェクトリーダ的なことをやったこともありました。
何で退職したの？
まだ上手く文章化できないのですが、これから先、今の仕事を続けていくこと、同じ会社に勤め続けること、
将来のキャリアのこと等を考えると、モチベーションを保てなくなったから。
SIer同士の政治的なアレコレにではなく、
ユーザのためになるような仕事がしたかったから。
とある方に背中を押していただけたから、かなぁという感じです。
会社自体、人間関係はすごく良かったので、そこはすごく働きやすかったです。
上記でも書いた通り、まだうまく文章という形に出来ないので、
詳細に興味がある方は、会った時にでも直接聞いてください。
これからどうするの？
今年の7~9月は、今までやっていたお仕事の続きをフリーランスという形で、退職した会社から請ける予定です。
その間に、またどこかにお世話になるか、
フリーランスを続けるかを考えていこうと思います。
せっかくワーキングホリデーで海外へ行ける年齢(30歳以下)でもありますし、
貯金もあるので、これを機に英語の勉強がてら海外へ行ってみるのも良さそうですね。
目指せ、日本脱出。
最後に
例のアレを置いておきます。ポチっていただけると喜びます。
Amazon.co.jp
TimePickiで値変更時に関数を実行させる方法
本記事では、TimePIckiで値を変更した時に
任意の関数を実行させる方法を紹介していきます。
本記事の内容です。
TimePIckiって何？
下記の記事を参照してください。j-levia.hatenablog.jp
サンプルコード
公式ドキュメントには載っていませんが、on_changeに関数を渡してあげることで、
値変更時に任意の関数を実行させることができます。
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>
$(function() { $('#timepicker').timepicki({ on_change: function() { // on_changeに関数を渡してあげれば、 // 値変更時に実行される alert($('#timepicker').val()); } }); });
時、分を個別に入力できる時間入力コントロール(コンポーネント)(TimePIcki)
本記事では、時、分を個別に入力できる時間入力コントロール、
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>
$(function() { $('#timepicker').timepicki(); });
使い方
公式ドキュメントが下記ページにありますので、参照してください。使い方
TimePicki - how to use jQuery Timepicker
使用できるオプション
TimePicki - use options in jQuery timepicker
Deferredのthen、done、failでハマったこと(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で列を非表示にする(非表示列を持たせる)
本記事では、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 }); });
