狛ログ

オフィス狛 技術部のJoeです。

前回、moment.jsを記事にしたのですが、一部機能しか紹介できなかったので、便利だなと思った機能を追加でご紹介します。

日付時刻の比較、差分、タイムゾーンの変換は、前回の記事を参照ください。
node.jsでの日付時刻処理（moment.jsを使ってみる）

※下記の例は、moment.jsのバージョン「2.22.2」で取得した結果になります。
バージョンにより、メソッド名やオブジェクト名などが異なる場合がありますので、ご注意ください。
公式ドキュメント

【フォーマット（format）】

// フォーマットを指定
console.log(moment('2019-08-28 01:05:07').format('YYYY年MM月DD日(ddd) HH時mm分ss秒'));  // 2019年08月28日(Wed) 01時05分07秒

// 曜日を日本語表示する場合、事前にロケールを設定します
moment.locale("ja");
console.log(moment('2019-08-28 01:05:07').format('YYYY年MM月DD日(ddd) HH時mm分ss秒'));  // 2019年08月28日(水) 01時05分07秒

// フォーマットを指定して、momentオブジェクトが作成可能です
const date1 = moment("2019年08月28日(水) 01時05分07秒", "YYYY年MM月DD日(ddd) HH時mm分ss秒");
console.log(moment(date1).format('YYYY/MM/DD(ddd) HH:mm:ss'));  // 2019/08/28(水) 01:05:07

// フォーマットが英語表記の場合は、事前にロケールを変更します
moment.locale("en");
const date2 = moment("Fri Aug 28 01:05:07 am 2019", "ddd MMM DD HH:mm:ss a YYYY");
console.log(moment(date2).format('YYYY/MM/DD(ddd) HH:mm:ss'));  // 2019/08/28(Wed) 01:05:07

【加減算（add、subtract）】

// 加算
console.log(moment('2019-08-30').add(2, 'days').format('YYYY年MM月DD日(ddd)'));  // 2019年09月01日(日)

// 減算
console.log(moment('2019-08-01').subtract(2, 'days').format('YYYY年MM月DD日(ddd)'));  // 2019年07月30日(火)

// 加減算する値は、オブジェクトで指定可能です（ｘ年ｘヶ月ｘ日後など）
console.log(moment('2019-08-30').add({year :2, month :3, day :5}}).format('YYYY年MM月DD日(ddd)'));  // 2021年12月05日(日)

【開始・終了（startOf、endOf）】

// 年の開始の日
console.log(moment('2019-09-04').startOf('year').format('YYYY/MM/DD(ddd) HH:mm:ss'));  // 2019/01/01(火) 00:00:00

// 週の最後の日
console.log(moment('2019-09-04').endOf('week').format('YYYY/MM/DD(ddd) HH:mm:ss'));  // 2019/09/07(土) 23:59:59

【月の日数（daysInMonth）】

// 月の日数
console.log(moment("2020-02", "YYYY-MM").daysInMonth()) // 29

// 月末の日を取得しても同じです
console.log(moment("2020-02", "YYYY-MM").endOf('month').get('date'));  // 29

【期間内判定（isBetween）】

// 期間内の場合、trueを返します（デフォルトでは、指定した開始、終了と一致する場合、falseを返します）
console.log(moment('2019-10-19').isBetween('2019-10-19', '2019-10-25'));  // false
console.log(moment('2019-10-20').isBetween('2019-10-19', '2019-10-25'));  // true
console.log(moment('2019-10-25').isBetween('2019-10-19', '2019-10-25'));  // false

// 第３パラメータで判定基準（年、月など）を指定できます
console.log(moment('2019-10-20').isBetween('2019-09-19', '2020-11-25', 'month'));  // true
console.log(moment('2019-10-20').isBetween('2019-09-19', '2020-11-25', 'year'));  // false

// 第４パラメータで、指定した開始、終了を含む「[]」、含まない「()」を指定できます
console.log(moment('2019-10-19').isBetween('2019-10-19', '2019-11-25', null, '[]'));  // true
console.log(moment('2019-10-19').isBetween('2019-10-19', '2019-11-25', null, '(]'));  // false

【うるう年判定（isLeapYear）】

// うるう年の場合、trueを返します
console.log(moment("2020", "YYYY").isLeapYear());  // true
console.log(moment("2019", "YYYY").isLeapYear());  // false

【オブジェクトのコピー（clone）】

// 値渡しでコピーされます（参照渡しではないです）
const date1 = moment('2019-08-28 01:05:07');
const date2 = date1.clone();
// コピー元を更新
console.log(date1.year(2020).format('YYYY/MM/DD(ddd) HH:mm:ss'));  // 2020/08/28(Fri) 01:05:07
// コピー先は変更されない
console.log(date2.format('YYYY/MM/DD(ddd) HH:mm:ss'));  // 2019/08/28(Wed) 01:05:07

【ロケールをカスタマイズする】

ロケールを新たに定義して、カスタマイズすることが可能です。

// ロケール「ja」を継承して新規ロケール「my_ja」を定義
moment.defineLocale('my_ja', {
  parentLocale: 'ja',
});

// 定義を更新
moment.updateLocale('my_ja', {
  // 月（MMMM：1月、2月・・・）の定義を旧暦の月で更新
  months : ["睦月", "如月", "弥生", "卯月", "皐月", "水無月", "文月", "葉月", "長月", "神無月", "霜月", "師走"],
  // 週の最初を月曜日に更新
  week : { dow: 1 }
});

// 「my_ja」にロケールを変更
moment.locale("my_ja");

// ９月を旧暦で、周の最初を表示
console.log(moment('2019-09-04').startOf('week').format('YYYY年 MMMM DD日(ddd)'));  // 2019年 長月 02日(月)

// 2番目の引数としてnullを渡すと、定義したロケールを削除します
moment.updateLocale('my_ja', null);

日付時刻処理のライブラリは他に「dayjs」、「date-fns」、「luxon」などありますが、
「moment」は一番人気のライブラリなので、ぜひ使ってみてください。

こんにちは、オフィス狛 デザイン部のSatoです。

「複数ある画像ファイルをエクセルに貼り付けたものが素材画像として送られてきて困った！」
「このパワーポイントに貼り付けられたロゴを保存できたらいいんだけどなあ……」
こんな風にエクセルやワードやパワーポイントに貼り付けられた画像を書き出したい、しかし方法がわからないという風に悩んだことありませんか？
今回はエクセル、ワード、パワーポイントに貼り付けられた画像の保存方法を解説します。

保存したい画像が少ない場合は「図として保存」という機能を使うと簡単です
保存したい貼り付けられてる画像の上で右クリックします。 出てきたメニューから「図として保存」を選択しましょう！
保存名、フォルダ、形式を選択し、保存ボタンを押せば保存完了です。


また、保存したい画像が数枚ある場合は以下の方法が便利です。
(なお、下記の手順はMacOSでの手順です)
まず、保存したい画像のあるファイルを別名コピーします。ファイルの名はどのようなものでも大丈夫です。
コピーしたファイルの名前を変更して拡張子をzipにします。(警告メッセージが出ますが「".zip"を使用」を押してください)
こうして出来上がったzipを解凍し、
解凍したファイル内に、元のファイルごとに作成されるディレクトリがあり（*1）、その中の『media』というディレクトリに画像ファイルがまとめられています。

＊１）
「元ファイルがエクセルの場合は『xl』」、
「元ファイルがワードの場合は『word』」、
「元ファイルがパワーポイントの場合『ppt』」

しかし、稀にアーカイブユーティリティ（Macの場合ダブルクリックでzip解凍するとこのソフトで解凍してくれます）で解凍すると「.cpgz」という拡張子の謎のファイルが出来てしまいます。
cpgz形式のファイルをダブルクリックで解凍すると、zip形式のファイルが出来、それを解凍するとcpgz形式のファイルが……といった具合に無限ループを繰り返し、正しく解凍されません。

 調べたところ、cpgz形式のファイルが出来てしまうzipファイルはターミナルで「unzip」というコマンドを使って解凍するときちんと解凍できる、とのことだったので試してみました。
（UNIXコマンドと普段戯れていない私のような非エンジニアの方々は、デスクトップに解凍できないファイルを置いておくことを推奨します。【】の中のコマンドをC⌘でコピーして⌘Vでペーストすればなんとかなりますので……！）

デスクトップに解凍したいzipファイルを置いたので【cd Desktop/】とターミナルに入力し、エンターキーを押してデスクトップに遷移します。
（きちんと遷移したか不安な時は【ls】とターミナルに入力してみてください。 デスクトップに保存してあるファイル名がずらずらとターミナルに表示されるはずです！）
遷移後、【unzip （解凍できないファイル名）.zip】（unzipとファイル名の間の半角スペースは消さないでください！）とターミナルに入力し、エンターキーを押すと処理が走るので少し待ちます。
少し待つと解凍されたファイルがデスクトップにできています！ 手間はかかりましたが、どうにか保存できました！やったー！

zip解凍がうまくいかない場合にはターミナルでUNIXコマンドをぽちぽち打たなくてはいけないので、きちんとできてるのかが分かりにくいかったりと少しデザイナーにはハードルが高いですが、これら二つの方法でどうにか保存できます！
困った際は試してみてください！

オフィス狛 技術部のHammarです。

最近ASP.Netを主に触れているのですが、いつもテストサーバー（実際のWindowsServerのIIS上）で動作確認をしていました。が、いまさらながらローカル環境を作ってみようと思い、Dockerとwindows IISを利用して作ってみました。
基本的なプロジェクトの構成としてはローカルIISのwebサーバーとDockerの仮想DBとのデータのやり取りを実現するという内容になります。
ちなみに開発はweb画面からのアクセスではなくAPI開発で、下記のようにJSONでHTTPリクエストを行うという流れで今回やりました。

■環境

webサーバー：windows 10 IIS
DB：SqlServer（Docker）

■ローカル（winsows10）のIISを有効化する

まずはローカルのIISを有効化されているか確認する必要があります。
有効化されていない場合は下記手順で有効化します。

1. ①コントロールパネルを開く
2. ②プログラムを選択する
3. ③「プログラムと機能」のWindowsの機能の有効化または無効化を選択
4. ④「Windowsの機能」の一覧のインターネットインフォメーションサービスにチェックを入れてOKを選択
5. ⑤デスクトップ左下のWindowsボタンを右クリック⇒コンピュータの管理を選択選択
6. ⑥サービスとアプリケーションに「IISマネージャー」があることを確認する
7. ⑦ブラウザにhttp://localhost/ とURLを入力し、Enterを押すと以下画面が見れる

■DockerでローカルDB環境を作る

※Dockerが既にインストールされていることが前提となります
まずはdockerを起動しておきます。

次にdocker-compose.ymlファイルを作成し、使うDBの内容を記載します。
今回はSqlServerを使って開発したいので、下記のような記載になります。

・docker-compose.yml

version: '3'
services:
  db:
    environment:
      - MSSQL_SA_PASSWORD=password
      - ACCEPT_EULA=Y
      - MSSQL_PID=Developer
    image: microsoft/mssql-server-linux:2017-latest
    ports:
      - "1433:1433"
    volumes:
      - ./mssql/:/c/var/opt/mssql/

あとは、このdocker-compose.ymlファイルがあるディレクトリで
で仮想ローカルDBを作成します。
あとはSSMS等のツールを利用し、テーブル作成等細かな設定を行います。

■IISのルートディレクトリにビルドしたファイルを設置する

visual studioでビルドしたファイルを下記IISのルートディレクトリに設置します。
C:\inetpub\wwwroot

■IISのサイトを作成する

デスクトップ左下のWindowsボタンを右クリック⇒コンピュータの管理を選択し
サービスとアプリケーションの「IISマネージャー」を選択します。

※サイトの作成方法についてはいろいろなサイトで説明があるのでここでは割愛します。

■IISサイトのサービスを開始する

サイトの「Default Web Site」で右クリック→「Webサイトの管理」→「開始」をクリックしてサイトを起動します。

あとは、作成したサイトにPOSTMAN等のツールを利用して、HTTPリクエストを投げて、正常にHTTPレスポンスが返ってくればローカル環境完成となります。

細かな部分は省いたのでかなりざっくりとした記載になってしまいましたが、ローカルIISのwebサーバーとDockerの仮想DBでローカル環境作る場合に参考になればと思います。

こんにちは、オフィス狛 デザイン部のSatoです。

先日webシステムのコーディングをする際に、「ここの要素の中身が空のときにCSSの内容を変えたいんだよなー」と考えることがありました。
jQueryを書けばいいのですがCSS3だけで出来たらいいなー、CSS3の擬似セレクタってなんでも出来そうだし……（雑なイメージ）と思ったので、できるか調べた所「要素が空の時の擬似セレクタ」が二つも見つかったので「要素が空の時の擬似セレクタ」のあれこれのメモ書き記事です。

※このブログ執筆時（2019/09/02）時点での情報です。



Mozilla Developer Centerなどで調べた所、要素が空の時の時のみ適用されるセレクタには「:empty」「:blank」の二種類があると分かりました。

「:empty」は完全に要素の中が空（スペース、改行もない状態）な時のみ適用される（コメントアウトした文字は要素中に入っていても大丈夫なようです）擬似クラスで、
「:blank」はスペースと改行以外の要素がない場合適用される擬似クラスであるという違いがあるそうです。

「:empty」は改行やスペースがあると使えないのか……。ちょっと不便。
少しエンジニアさんに説明するの面倒だし「:blank」使おうかなと思ったのですが、まだ主要ブラウザで未実装なようです。悔しい……。
つまり現在時点では「:empty」を使わざるをえないわけですね。


試しに「:empty」を使ってみました。（わかりにくいデモですが、最初の<div>のみ「:empty」を適用しています。
コメントアウトしている所に何か要素を入れると「:empty」を適用していない下の<div>で括った部分と背景色が同じになります。）


かなり扱いが難しいのでなかなか使いにくいですが、もしCSS3だけで要素の中身が空の時のみCSSの内容を変えたい時は擬似クラス「:empty」を思い出してください。

オフィス狛 技術部のHammarです。

個人的に最近はASP.NETを使った開発を多くやっているのですが、そこでC#プログラム内の定数を外部から変更したいという要望がありました。
基本的にプログラム内の定数はビルドを行わない限り変更することはできませんが、プロジェクト内のweb.configというファイルに値を設定することにより、いちいちビルドをしなくても値を変更できるということで、その設定をやってみたのでご紹介したいと思います。

■web.configに値を記載する

まずweb.configに設定したい値を下記のようにappSettingsセクションを追記します。
keyに変数名、valueに値というように記述します

  <appSettings>
    <add key="name" value="apple" />
    <add key="count" value="3" />
  </appSettings>

設定は上記の記載だけで完了です。形式もkey=valueの記載なのでわかりやすく簡単ですね。

■プログラム内でweb.configの設定値を呼び出す

ConfigurationManagerクラスを使う必要があるので、まずusing設定を行います。

using System.Configuration;

※上記追記だけで読込ができない場合があるので、その場合は下記のようにプロジェクトの参照から追加してみてください。

【参照追加方法】

1. ①「ソリューションエクスプローラー」→「参照」右クリック→「参照の追加」
2. ②アセンブリ：フレームワーク内にある「System.Configuration」にチェックを入れて「OK」

ここまで整ったら後は設定を呼ぶだけです。

string fruitsName = ConfigurationManager.AppSettings["name"];
int count = int.Parse(ConfigurationManager.AppSettings["count"]);

ちなみにweb.configの設定値は常にstringなので、数値を使いたい場合は上記のようにint型にParseする必要があります。

上記のようにとても簡単に設定できました。
例えば下記のようにDBの接続先情報等を設定しておいて、接続先情報だけ変更したい場合にはいちいちビルドする必要がないので楽だと思います。

  <appSettings>
    <add key="connectionDB" value="Data Source=XX.XX.XX.XX; Initial Catalog=testdb; User Id=userid; Password=password; "/>
  </appSettings>

※web.config内の値を変更しても、すぐにプログラム内に適用される訳では無いのでご注意ください。
IIS的には、接続が無くなった時点で、自動でサイト再起動が発生し、値が適用される事になります。

こんにちは、オフィス狛 モバイル開発担当 Aika-yuy です。
今回の投稿は、 Xcode10.2以降にアップデートした後にクラッシュする機能があったので、
解決方法を備忘録として残しておこうと思います。

・発生した事象

・Xcode10.1で作られていたアプリがあり、改修を行う事になったのですが、Xcodeのアップデータがあったので、10.2へアップデートした。
・ビルドは問題なく通ったが、一部の機能を実行すると、アプリが落ちるようになった。

という事で、修正前のコードです。こちらを実行したところ落ちてしまい下記のエラーが出ました。

 public init(_ coder: NSCoder? = nil) {
        if let coder = coder {
            super.init(coder: coder)!
        }
}
public override init(frame:CGRect) {
        super.init(frame:frame)
        self.initialize()
}

Terminating app due to uncaught exception 'NSGenericException', reason: 'This coder requires that replaced objects be returned from initWithCoder

・前提条件

・Objective-CとSwiftでは、呼び出し時の型が違う。
・型を合わせる為に、「@objc」を付ける

・エラーになる理由

Xcode10.2になって、コンパイラーの仕様が変更され、 今まで@objc推論が行われていたが、行われなくなったのでエラーになってしまったようです。

・対応方法

「@objc」が自動で付かなくなったので、必要ならば明示的に付けないと、Objective-CからSwiftをCallする時に落ちてしまいます。
該当する箇所を修正しました。

@objc public init(_ coder: NSCoder? = nil) {
        if let coder = coder {
            super.init(coder: coder)!
        }
}
@objc public override init(frame:CGRect) {
        super.init(frame:frame)
        self.initialize()
}

@objcをつけることで、使用することができました。

オフィス狛 技術部のJoeです。

node.js（JavaScript）では日付時刻の扱いが難しく、特に文字列の時刻などを比較や計算するときはいつも調べているので、備忘録を兼ねてブログに書いておこうと思います。
また、日付時刻操作ではmoment.jsという便利なライブラリがあるので、同じ処理をmoment.jsでも書いてみます。

①　時刻（文字列）の比較と差分

【ライブラリを使用しない場合】

// Dateオブジェクトを生成
const dateTime1 = new Date('2019-08-01 09:00');
const dateTime2 = new Date('2019-08-01 14:00');

// 大小確認
if (dateTime1 < dateTime2) {
    処理;
}

// 一致確認の場合は「getTime()」でミリ秒形式に変換する
if (dateTime1.getTime() === dateTime2.getTime()) {
    処理;
}

// 差分算出の場合も「getTime()」でミリ秒形式に変換して計算、結果のミリ秒を欲しい単位に計算する
const diffTime = dateTime2.getTime() - dateTime1.getTime(); // ミリ秒で差分を算出
const diffSecond = Math.floor(diffTime / 1000 / 60); // 結果のミリ秒を分に変換
console.log(diffSecond); // 300（分）

【moment.jsを使用した場合】

const moment = require('moment');

// momentオブジェクトを生成
const dateTime1 = moment('2019-08-01 09:00');
const dateTime2 = moment('2019-08-01 14:00');

// 比較（<：isBefore  >：isAfter  <=：isSameOrBefore  >=：isSameOrAfter）
if (moment(dateTime1).isBefore(dateTime2)) {
    処理;
}

// 一致（第２パラメータで年から比較したい単位までを指定可能）
if (moment(dateTime1).isSame(dateTime2, 'minute')) { // 年～分までの一致確認
    処理;
}

// 差分（第２パラメータで取得したい差分の単位を指定可能）
const diffTime = dateTime2.diff(dateTime1, 'minutes'); // 差分を分で取得
console.log(diffTime); // 300（分）

②　UTCからJSTに変換

【ライブラリを使用しない場合】
文字列の日時はUTCの時間と仮定しています。

// Dateオブジェクトを生成
const dateTime1 = new Date('2019-08-01 09:00'); // UTCの日時と仮定しています
// ミリ秒にして9時間（32,400,000ミリ秒）足す
dateTime1.setTime(dateTime1.getTime() + 1000 * 60 * 60 * 9);
console.log(dateTime1);  // Thu Aug 01 2019 18:00:00 GMT+0900 (日本標準時)

タイムゾーンを扱う場合は、「moment-timezone」を使います。
【moment.jsを使用した場合】

const momentTimezone = require('moment-timezone');

// UTCのmomentオブジェクトを生成
const dateTimeUtc = momentTimezone.tz('2019-08-01 09:00:11', 'UTC');
// JSTに変換（フォーマットも併せて変換）
const dateTimeJst = momentTimezone(dateTimeUtc).tz('Asia/Tokyo').format('YYYY/MM/DD HH:mm:ss');
console.log(dateTimeJst); // 2019/08/01 18:00:11

ご紹介したmoment.jsの機能はほんの一部ですので、日付時刻操作で悩んだらぜひ使ってみてください。