狛ログ

2018年2月19日月曜日

Bootstrap の Modal ダイアログ(スクロール有り)で tooltipster 使った場合に、表示が固定されしまう現象の対応方法

2月 19, 2018

オフィス狛 技術部です。

Webシステムなどで、ツールチップ(吹き出し)を使用する為の「tooltipster」という jQuery プラグインはご存知でしょうか?
弊社でも良く使わせて頂いているのですが、ある限定的なシチュエーションで期待した動作をしなかったので、現象と対応方法を記事にしたいと思います。

・前提条件

今回の現象は、以下の時に発生します。
Bootstrap の Modal ダイアログ(スクロール有り)で tooltipster 使った場合

Bootstrap Modal
Tooltipster - The jQuery Tooltip Plugin -

・発生した現象

スクロールしても、tooltipster で表示したツールチップ(吹き出し)が画面に固定され、スクロールに追従しない。

スクロール前の吹き出し
スクロール後の吹き出し

スクロールしても、吹き出してが画面上の元の位置に固定されている。

・対応方法

こういった場合、モーダルをスクロールする毎に'reposition'してあげる必要があります。
$('モーダルのIDなど').on('scroll', function(){
    $(this).find('.tooltipster').tooltipster('reposition');
});

上記記載を追加することで、モーダルをスクロールした場合でも、
tooltipsterで表示した要素も一緒にスクロールされてくれます。

ちょっとした小技ですが、案外ハマってしまう部分なので、今回記事にしました。


2018年2月16日金曜日

Craft を利用して Invision を Photoshop と連携して手軽に同期できるようにする

2月 16, 2018

初めまして。オフィス狛 デザイン部です。

プログラム系の記事以外にも、デザイン系の記事も増やしていこう!
・・・と言うミッションがデザイン部に課せられたので、
これからどんどん記事を書いて行こうと思います。よろしくお願いします。

さて、突然ですが、皆様はInvisionをご存知でしょうか?
InVision | Digital Product Design, Workflow & Collaboration

Invision は簡単にモックアップが共有できるとても便利なサービスです。
しかし、ページ数の多いプロトタイプを作る際、
現状は psd 形式のデータを直接アップロードすることは不可能な為、
Photoshop ユーザーの場合、複数のアートボードで作ったモックをわざわざ png などの
形式に書き出してアップロードするのですが、やっぱり少し面倒です……。

Craft というプラグインを利用すれば簡単にプロトタイプが作成でき、更新も1クリックで便利です!
ただ、Photoshop で連携させるのに少し時間がかかってしまったので、今回は連携の手順をご紹介させて頂きます。
慣れてしまえば1分程度で Invision に同期できるようになりますよ!

① Invision上にプロジェクトを作成。

最初にInvisionのマイプロジェクトページの+ボタンを押します。
プロジェクトタイプを選択する画面に遷移するので「PROTOTYPE」を選択します。


次のページに遷移したらプロジェクト名と表示端末を選択します。
この時点で空のプロトタイプが完成しています。

② 便利なプラグイン、Craft をインストール。

ファイルのアップロード方法を聞かれるので「SYNC YOUR PROJECTS」の下のダウンロードボタンをクリックしてください。Craftのインストーラーのダウンロードが始まります。


Craftのインストーラーは公式サイトからもダウンロードできます。

インストーラーを使い、Craftのインストールが終わるとPCのツールバーにCraftのアイコンが表示されます。

Photoshop版のインストールボタンを押すとインストールが始まります。

インストールが終わったらPhotoshoを起動(起動していた場合は再起動)しましょう。
Photoshopメニューバーの「ウインドウ」から「エクステンション」を選択してください。
「Data」「Duplicate」「Duplicate」「Freehand」「Stock」「Sync」が増えていればインストールは成功です!

③ InVisionと連携させる。

Invisionと同期するのに使用するのは「sync」機能なので今回は「sync」をクリックしてください。
パネルにsyncパネルが追加されます。
パネルが出てこない場合アイコンをクリックするとsyncパネルが出てきます。
ログインを促すメッセージと「Sign in to InVision」というボタンが出てくるので、ボタンを押すとメールアドレスとパスワード入力欄が出てきます。
InVisionに登録したメールアドレスとパスワードを入力しsign inボタンを押せばInvisionとPhotoshopの連携ができました!

④ プロトタイプを完成させる

さあ、プロトタイプにページを追加してみましょう!
プロトタイプに追加したいファイルを Photoshop で開きます。
syncパネルを開き、タブから自分が制作した同期したいプロトタイプを選択します。
アートボード全てを同期するか、選択したアートボードのみ同期するかとサイズ(1xか2x)を選択し、「sync to InVision」ボタンをクリックします。

選択したプロトタイプを確認するとページが更新されているかと思います。
同じ手順でアートボードを最新の状態に更新することもできます。

いかがでしたでしょうか?
今回インストールしたCraftは他にも色々な機能があります。
ダミーのテキストや画像を自動的に挿入してくれたりする機能が代表的ですね。(ちなみに、私は多機能すぎてまだ使いこなせていません)
使いこなせば、さらに時短になると思うので皆さん是非使ってみてください!

2018年2月10日土曜日

よく使い、地味に役立つ Xcode のショートカット まとめ

2月 10, 2018
オフィス狛 技術部です。

IDE を使用しているとき、同じことを何度もすることはたくさんあると思いますが、
マウス を使うと作業の流れが止まるような感じがしないでしょうか?
そんなときに ショートカット を知っていると作業がスムーズに行えるようになり、
効率的に作業が行えますよね。

※個人的には マウス を使うよりも ツール を使いこなしている感覚がしてなんか楽しくなってくるという 相乗効果 を得ています。

今回は色々ある Xcode ショートカットの中でも
よく使う ショートカット をまとめてみました。

1)左側のpaneを開く

cmd + 0
もう一回入力すると閉じる

2)右側のpaneを開く

opt + cmd + 0 
もう一回入力すると閉じる

3)メソッドドキュメントの自動生成

opt + cmd + /

4)新規タブを開く

cmd + t

5)新規Winodowを開く

opt + cmd + t

6)左上navigator内の移動(Project navigator)

cmd + 1

7)左上navigator内の移動(Source Control navigator)

cmd + 2
以降3,4,5...と順番に移動できる

8)ファイル検索

cmd + shift + o
選択したファイルをalt + enterでセカンドパネルに表示

9)Controlのコピー

コピーしたいコントロールを選択し、optを押しながらドラッグ

10)Assistant editorを開く

opt + cmd + enter
cmd + enterで閉じる

11)画面上のbreakpointを一括on off

cmd + y

12)デバックエリアの表示切り替え

shift + cmd + y

13)ファイル内メソッド一覧表示

ctrl + 6

〇その他のよく使うショートカット〇

コメントアウト:cmd + /
自動インデント:cmd + i
アプリ実行:cmd + r
アプリ終了:cmd + .
テスト実行:cmd + t
ビルド:cmd + b
クリーン:shift + cmd + k

ちりも積もれば山となる。

 ショートカット は非常に地味ですが、
わずかな時間の短縮が、大きな作業効率の向上につながるのでうまく使いこなしていきたいですね。

もし、こんなショートカットがとても便利だ!などございましたら、教えてください。


2018年1月23日火曜日

Slack を RSS リーダーとして使う

1月 23, 2018

オフィス狛 技術部です。

ここ最近、Macで使えるRSSリーダーを探していたのですが、
色々とツールが増えると面倒、という事で、
既に社内で使用している Slack を RSS リーダーとして使う事にしました。

1)アプリのインストール

まずは、SlackにRSSアプリをインストールします。
インストールはこちら(https://slack.com/apps/A0F81R7U7-rss)のアドレスから出来ます。


※弊社は言語設定が英語でSlackを使用しているので、上記のような画面になりますが、
日本語環境で使っている方は、日本語で表示されます。(以降の処理も同様です)

ここで「Install」を押すと、


こちらの画面になりますので、ここで「Add RSS integration」を押します。

次に、設定画面に遷移しますが、後で設定が可能なので、ここでは何もしないでおきます。

2)フィードの追加

次に、RSSリーダー用に適当なチャンネルを作ります。
(ちなみに、私はPrivate Channelにしています。 理由は後述。)

そして、作成したチャンネルで、
/feed subscribe blog.officekoma.co.jp/feeds/posts/default?alt=rss
とコマンド入力し、フィードを追加します。
blog.xxxxの部分は、購読したいブログ・サイト等のフィードURLを設定して下さい。
今回は、弊社のブログサイトを例として追加してみます。
コマンド実行後は以下のような表示になります。

3)登録してあるフィードの確認

追加したフィードは、
/feed list
とコマンド入力する事で、リストで確認することが出来ます。
コマンド実行後は以下のような表示になります。

4)フィードが更新された場合の見え方

さて、ブログが更新されるとどう見えるのか、
試しに弊社のブログを更新してみます。すると・・・
下図のようにSlackへ投稿されます。

5)フィードの削除

削除する場合ですが、先程リストで確認した「ID」を使用します。
/feed remove 296084938455
これで該当のフィードが削除されます。

削除したあとに、念のためリスト確認(「/feed list」)してみます。
ちゃんと消えていますね。

以上が、Slack を RSS リーダーとして使う方法です。

【補足】Slack RSS リーダー運用の仕方

まず気をつけないといけないのは、Slackを無料プランで使用している場合ですね。
RSS リーダーで大量に投稿していると、10,000制限に達して、
他のチャンネルのメッセージが埋もれてしまうので。

後は、情報の取捨選択ですね。RSSリーダーをPrivate Channelにしているのもそれが理由です。
テック系の有名な会社などのブログを登録していると、
有用な情報が取れつつも、雑談的な情報も受け取ってしまいます。(私は雑談も好きですが)
Public ChannelでRSSリーダーを運用してしまうと、
そういう通知も受け取る事になり、人によってはノイズになってしまいます。

と言うわけで、現状、共有したい情報があれば、その都度Public Channelへリンクコピーしています。
(Private Channelの投稿をPublic Channelへは共有出来ないので、リンクのコピーでやっています。)

以上です。しばらく運用してみて、もっと良い方法がないか模索します。


2018年1月14日日曜日

HighSierraでHomebrewのbrew install、brew updateに失敗する場合の対処

1月 14, 2018

オフィス狛 技術部です。

High Sierra(macOS 10.13.2)を搭載したmacで、
久々に Homebrew の brew install を行なったらエラーになりました。
officekoma:~ hogehoge$ brew install python3
Error: /usr/local is not writable. You should change the ownership
and permissions of /usr/local back to your user account:
  sudo chown -R $(whoami) /usr/local
似たような事が前にもありました。
※CocoaPodsでAbort trap: 6が発生した場合の対処方法。

先程のエラーメッセージに「sudo chown -R $(whoami) /usr/local」を実行するように記載があるのでやってみます。
officekoma:~ hogehoge$ sudo chown -R $(whoami) /usr/local
Password:
chown: /usr/local: Operation not permitted
・・・・ダメでした。

こういう時は、再インストールした方が早いです。下記のコマンドでインストールを行います。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
※詳細は本家サイトもご覧ください。

インストール出来たら、brewを試してみます。
officekoma:~ hogehoge$ brew install python3
(中略)
officekoma:~ hogehoge$ which python3
/usr/local/bin/python3
officekoma:~ hogehoge$ python3 --version
Python 3.6.4
うまく行きました。

macOSのアップデート後に、久しく使っていないツールを使うと、今回のような事が発生しやすいですね。

2018年1月6日土曜日

PHP7 における date.timezone の設定について

1月 06, 2018

オフィス狛 技術部です。

今更感はあるのですが、PHP7から変わった事の内、
date.timezone の設定について記載しようと思います。

以前、『PHPで Fatal error: Uncaught exception 'ErrorException' with message date() が発生した場合の対処方法』
という記事を書いたのですが、
PHP7から、タイムゾーンが指定されていない場合でもエラーにならないようになりました。

お手軽に実行できるのがPHPの良さであると思うので、
デフォルト設定でエラーになるのはちょっと嫌ですよね。
そういう意味だと、良い変更だと思うのですが、日本だと大抵「Asia/Tokyo」なので、
結局設定する事になりますね・・・・。(逆に忘れそう)

新年一発目なので、軽い記事にしました。今年も宜しくお願い致します。

2017年12月16日土曜日

C# で SQL Server 接続時に "SqlCommand.Prepare requires all variable length parameters to have an explicitly set non-zero Size" が発生した場合の対処

12月 16, 2017
オフィス狛 技術部です。

とあるプロジェクト(C#)で、今まで Oracle だけに接続していたのが、SQL Server への接続も追加になりました。
Oracle への接続は「Oracle.ManagedDataAccess.Client」を使っていましたが、
SQL Server への接続は、「System.Data.SqlClient」を使う事になりました。

※本当ならデータベースに依存しないように「System.Data.Common」を使って、
プロバイダファクトリ的に作るべきなのでしょうが、途中から変更するのが大人の事情で難しかったです・・・。

と言う事で、Oracleへの接続クラスをコピーして、使用するクラスなどを変えていざ実行してみると、

    "Message": "An error has occurred.",
    "ExceptionMessage": "SqlCommand.Prepare requires all variable length parameters to have an explicitly set non-zero Size",
    "ExceptionType": "System.ApplicationException",

「可変長パラメータには、必ずゼロ以外のサイズを指定しろ」と言っていますね。
確かに、プログラム的には、
string sql =
        "SELECT login_id" 
  + ",user_name "
  + "FROM authentication_info "
                + "WHERE user_identifier = :user_identifier "
                + "AND hoge_code = :hoge_code ";
〜中略〜
SqlParameter parameter1 = this._cmd.CreateParameter();
parameter1.Value = "123";
parameter1.ParameterName = ":user_identifier";
parameter1.DbType = DbType.String;
SqlParameter parameter2 = this._cmd.CreateParameter();
parameter2.Value = "123";
parameter2.ParameterName = ":hoge_code";
parameter2.DbType = DbType.String;
this._cmd.Parameters.Add(parameter1);
this._cmd.Parameters.Add(parameter2);
となっていて、サイズを指定していません。

「Oracle.ManagedDataAccess.Client」では不要でも、
「System.Data.SqlClient」では必要なんですね。

と言うわけで、プログラムも以下の様に変更します。
string sql =
        "SELECT login_id" 
  + ",user_name "
  + "FROM authentication_info "
                + "WHERE user_identifier = @user_identifier "
                + "AND hoge_code = @hoge_code ";
〜中略〜
SqlParameter parameter1 = this._cmd.CreateParameter();
parameter1.Value = "123";
parameter1.ParameterName = ":user_identifier";
parameter1.DbType = DbType.String;
parameter1.Size = parameter1.Value.ToString().Length;   // 追加
SqlParameter parameter2 = this._cmd.CreateParameter();
parameter2.Value = "123";
parameter2.ParameterName = ":hoge_code";
parameter2.DbType = DbType.String;
parameter2.Size = parameter2.Value.ToString().Length;  // 追加
this._cmd.Parameters.Add(parameter1);
this._cmd.Parameters.Add(parameter2);
これで問題なく実行出来ました。

ちなみに、「Oracle.ManagedDataAccess.Client」でのプリペアドステートメントには「:(コロン)」を使いますが、「System.Data.SqlClient」では「@(アットマーク)」を使います。

今回の話は大した話ではないのですが、
「Oracle.ManagedDataAccess.Client」では問題無かった、と言う部分がハマりどころなので、
わざわざ記事にしてみました。