Yearly Archives: 2018

New!

CSS3: テーブルセルの背景色を1行ごと交互に定義する

今回は、擬似クラス :nth-child(even) を使って、table のセルの背景色を交互に定義する方法をメモしておきます。 目次 テーブルセルの背景色を1行ごと交互に定義する まとめ テーブルセルの背景色を1行ごと交互に定義する 以下は bg-alternate クラスを table タグに定義すれば td 要素の背景色が交互に定義されるサンプルです。 まとめ Bootstrap 等の CSS フレームワークを使えば table もいい感じに仕上がりますが、ゼロベースで table の UI を設計する場合、セルを交互に色分けする事で視認性向上に役立ちます。 :nth-child(even), :nth-child(odd) の用途は、この使い方が一番多いのではないでしょうか。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

Apple: Numbers のテーブルを Illustrator で使用する方法

Mac で Excel ライクな作業を行おうとした時、まず思い浮かぶのが Numbers です。 これまで、Numbers は仕事で共有している Excel ファイルを開くためだけに利用していましたが、ゼロベースで表計算のため Numbers を使用してみると、Excel よりもシンプルで、明確な UI になっているため、目的を達成するためのコストが Excel より低く、使っていてとても気持ちがいいアプリケーションです。 今回は、その Numbers で作成したテーブル等のデータを、Adobe Illustrator でも使いたかったので、そのための方法を説明したいと思います。 目次 Numbers のテーブルを Illustrator で使用する方法 まとめ Numbers のテーブルを Illustrator で使用する方法 以下のような Numbers のサンプルデータを、Illustrator で利用したい場合の説明をします。 メニューから ファイル -> 書き出す -> PDF を選択します。 そのまま 次へ… をクリックします。 書き出す をクリックすれば PDF ファイルとして書き出されます。 書き出した PDF ファイルを Illustrator で開くと、ベクターデータのテーブルやグラフが AI オブジェクトとして利用できます。 まとめ ビジネス用途とするなら、高度なマクロが利用できる Excel に軍配が上がりますが、Apple らしいビジュアライズされたテンプレートを利用したプレゼン資料作成や、個人利用目的であれば Numbers は Excel 以上のパフォーマンスを発揮します。 Numbers と Excel はコンセプトが全くことなる表計算ソフトですので、Excel のあれが使えないといった問題がある場合、そもそも必要ない事をやろうとしている可能性がないか?を考えながら、両者を使い分けるといいかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

CSS3: Bootstrap4 グリッドシステムで横並びの col の順番を入れ替える

 Bootstrap のグリッドシステムでレスポンシブデザインを行う際、画面サイズに応じて col の順番を入れ替えたいケースがあります。 そういった場合、従来は col-push, col-pull といったクラスを使用していましたが、Bootstrap4 ではクラス名が order へと変更されています。 今回はこの order の使用方法を説明したいと思います。 目次 Bootstrap4 Grid で横並びの col の順番を入れ替える まとめ Bootstrap4 Grid で横並びの col の順番を入れ替える 以下のような 3つの div(col)があった場合、左から順番に 1-2-3 と表示されます。 order-first 3番目 の div(col)に order-first クラスを加えた場合、3-1-2 と表示されます。 order-last 1番目 の div(col)に order-last クラスを加えた場合、2-3-1 と表示されます。 order-num 2番目 の div(col)に order-12, 3番目 の div(col)に order-1 クラスを加えた場合、1-3-2 と表示されます。 bootstrap のスタイルを見ると、order-first には -1、order-last には 13 の order が定義されているため、order-1 や order-12 より優先されることが理解できます。 まとめ bootstrap のバージョンアップによる修正コストは無視できるものではありませんが、今回説明した order への変更は pull、push より明示的な表現のため、コーディングしやすく、メンテナンスがやりやすくなったと感じました。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Tips: macOS で BizSTATION を利用する方法

メガバンクのひとつである三菱UFJ銀行のネットバンキングサービスに、BizSTATION というサービスがあります。 ただ、この BizSTATION は Mac ユーザーを完全に無視した仕様となっており、Windows 機のみ、しかも IE という前時代的な環境でなければ利用できません。 今回は、この三菱UFJ銀行のネットバンキング BizSTATION を Mac で利用する手順をメモしておきます。 目次 電子証明書の取得 証明書の発行 証明書の書き出し キーチェーンへ登録 BizSTATION ログイン まとめ macOS で BizSTATION を利用する方法 Mac で BizSTATION を利用するための手続きには Windows 環境(仮想環境でも可)が必須となります。 Windows がない方は、早々に諦めて、Windows 機を導入するか、BizSTATION から他社のネットバンキングに移行することをお勧めします。 環境 Safari(macOS) Windows 10(VMWare,VirtualBox等の仮想環境) + FireFox(Win) BizSTATION ワンタイムパスワードカード FireFox(Win) > 電子証明書の取得 画面の左下にある 電子証明書取得 ボタンからログイン ご契約者番号、利用者ID、初回ログインパスワード を入力しログイン FireFox(Win) > 証明書の発行 証明書取得用パスワード再発行 で取得したパスワードを入力後、証明書が発行される FireFox(Win) > 証明書の書き出し FireFox オプション > プライバシーとセキュリティ > 証明書を表示 取得した BizSTATION の証明書を選択し バックアップ で証明書ファイルを書き出す 書き出し時に、パスワードロックをかけるため、バックアップ用パスワードを入力し OK Win から Mac に、書き出した証明書ファイルを移動 すれば Windows での作業は完了 macOS > キーチェーンへ登録 証明書ファイルをダブルクリックでキーチェーンが起動するので、証明書書き出し時に設定した パスワードを入力 し、キーチェーンへ証明書を登録する Safari(macOS) > BizSTATION ログイン 各種 ログインボタン(円預金) よりログイン このブラウザは対応しておりません…画面が表示 Safari メニュー 開発 -> ユーザーエージェント -> InternetExplorer11 で UA を切り替える このブラウザは対応しておりません…画面が、ログイン画面に切り替わるので ログインパスワードを入力 しログイン まとめ 証明書は年に1度更新する必要があります。 今後も BizSTATION が Mac をサポートしないことを前提とした場合、時間的コスト面から BizSTATION 専用の安い Windows 機を購入するのが正解かもしれません。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

WordPress: 投稿に自動挿入される p タグを無効化する方法

長らく WordPress を触っていなかったせいで、インストール直後のデフォルト状態で、投稿に自動挿入される pタグの存在を忘れていました。 今回はこの pタグが自動挿入されないようにする方法をメモしておきます。 目次 投稿に自動挿入される p タグを無効化する方法 まとめ 投稿に自動挿入される p タグを無効化する方法 おきまりの function.php にアクションとフィルタフックを以下のように定義します。 function.php まとめ 今回あらためて感じたのですが、WordPress はとてもよく出来ていますね。 WordPress を使えば、一般的なコーポレートサイトなら、学習コストを含めて2,3週間程度あればそこそこのものが完成してしまいます。 ホームページ制作はプロに任せるのも効率的ですが、WordPress 自体がプロの役割に相当しますので、Web に興味があれば、WordPress を使って自身で制作してみることをオススメします。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する

アプリケーションの仕様上、約20年ぶりに テーブルで HTML コーディングを行う必要がありました(笑) テーブルの最終行にのみ適用したいスタイルがあり、疑似クラスを使って簡単に実現できたのですが、少し手間取った場面がありました。 今回は、疑似クラス :last-child の使い方をメモしておきます。 目次 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する まとめ 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する table の最終行の th, td 要素の下部ボーダーを表示させたくない場合、疑似クラス :last-child を以下のように適用します。 HTML CSS ところが table が 1行の場合、下部ボーダーは表示されてしまいます。 1行でも下部ボーダーをなくしたい場合、先ほどのスタイルへ、以下のように疑似クラス :only-child を追加することで、最終行のセル、もしくは1行だった場合のセルに対しスタイルが適用されます。 HTML CSS まとめ 今更、テーブルでレイアウトのコーディングするのはやり切れませんでしたが、テーブルにはレスポンシブデザインに必要な柔軟性を持ち合わせています。 画面レイアウトにテーブルを使用することは、コーディング規約やメンテナンス上問題があり、本来の用途以外での乱用は避けるべきですが、flex レイアウトで解決できないとき、助けられる場面もあるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Xcode: ワイヤレスで実機ビルドを実行する

現在 iOS アプリの作業を行なっており、久しぶりに Xcode を開いています。 色々と知らない機能が増えていますが、その中でも昨年の WWDC からずっと気になっていた、ワイヤレスでビルドを行う方法をメモしておきます。 目次 ワイヤレスで実機ビルドを実行する まとめ ワイヤレスで実機ビルドを実行する 従来通り USB で Mac と iOS デバイスを接続し Window -> Devices and Simulators でウインドウを開きます。 Connect via netowork にチェックを入れます。左カラムの Connected のデバイス名の横にネットワークのアイコンが表示されれば、USB ケーブルを実機から外してもビルドできるようになります。 まとめ 2年ぶりくらいに Xcode を開きましたが、色々と変更がありキャッチアップに一苦労しそうです。 作業をやっていて便利だと気づいた点があれば、記事にしていきたいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

iOS: iPhone / iPad で FaceTime が終了できない問題の解決方法

先日、FaceTime での着信を受けようとしたところ、通話開始処理のまま相手と通話が始まらず、一旦終了しようと思っても FaceTime アプリが終了できない状態となりました。 iPhone を強制再起動しようにも、FaceTime の画面に戻され、FaceTime が終了しないことには iOS の再起動もできない絶望的な状態となりました。 今回は、上記のような状態となってしまったときの解決方法をメモしておきます。 目次 iPhone / iPad で FaceTime が終了できない問題の解決方法 まとめ iPhone / iPad で FaceTime が終了できない問題の解決方法 FaceTime が終了不能となり、iOS も強制再起動ができなくなったら、以下のオペレーションを実行してください。 「音量ボタン(大)」を1回押す 「音量ボタン(小)」を1回押す 「電源ボタン」を押し続ける 「スライドで電源オフ」の画面が表示されるが、そのまま「電源ボタン」を押し続ける 画面がブラックアウトしたら「電源ボタン」を離す 「電源ボタン」を押し続け iOS を起動 以上で iOS が再起動し、FaceTime は強制終了されます。 まとめ 最近の iOS はどうしたのでしょうか。iOS 10 あたりから、従来の iOS からは想像もできない純正アプリの致命的なバグや、操作不能に陥るケースが増えてきている気がします。 iPhone X に関しては、センサーハウジングにかかる画面上部のバグで、アプリが操作不能になるケースが頻繁に発生します。Apple 製品はスマートデバイス市場でもっとも高価となっていますので、エコシステムを含む OS 環境を今以上にリソースをかけ改善してほしいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Mac: Adobe Reader で PDF 書類にデジタル印鑑を捺印する方法

ネットショップのオーナーをはじめ、ペーパーレス化が進む現代では、請求書や領収書に電子書面を利用する方も多いかと思います。電子書面のデータ形式で一番に思い当たるのが PDF ですが、無償で利用できる Adobe Reader にはデジタル捺印できる機能があります。 今回は Adobe Reader で、オリジナルデザインのデジタル印鑑を、PDF 書類に捺印する方法を説明したいと思います。 目次 Adobe Reader で PDF 書類にデジタル印鑑を捺印する方法 まとめ Adobe Reader で PDF 書類にデジタル印鑑を捺印する方法 Adobe Illustrator で 印鑑のデザインを作成します。今回はサンプルで以下のような角印を作成し、PDF で保存しました。 領収書の PDF ファイルを Adobe Reader で開き、ツールタブ をクリックします。(領収書の PDF データは作成済みを前提としています) ツールアイコン一覧の「スタンプ」から「開く」をクリックします。 「カスタムスタンプ」から「作成」を選択します。 「カスタムスタンプ用の画像を選択」画面の「参照」で、作成済みのスタンプ画像を選択し、「OK」をクリックします。 「カスタムスタンプを作成」画面で任意の「分類(ここでは電子印鑑)」「名前」を入力し「OK」をクリックします。 「スタンプ」から上記の分類「電子印鑑」を選択すると、先ほど作成したスタンプがあるので選択します。 ユーザー情報を任意で入力します。今回は省略します。 スタンプ陰影が表示され、PDF 書面上の任意の場所でクリックすれば、電子印鑑が押印されます。 まとめ 領収書は額面に応じて収入印紙を貼らなければなりませんが、領収書を電子文書として発行すると一般的に印紙税の対象となりません。 電子発行とは、主に「WEB上で電子発行」「メールで取り交わす」「FAXで取り交わす」ことを指します。 商品、商材の単価が高額の領収書の場合、電子発行することで印紙税を削減することができますので、企業のみならず、個人事業主の方もさらにペーパーレス化が進んでいくと思われます。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML5: Web アプリ・サイトに印刷ボタンを設置する

クラウドストレージや PDF によりペーパーレス化が進んだ昨今ですが、プレゼンや各資料作成等で情報をプリントアウトしなければいけない場面もあるかと思います。 今回は Web アプリや Web サイトに、プリントボタンを設置したい場合の方法を説明したいと思います。 目次 Web アプリ・サイトに印刷ボタンを設置する まとめ Web アプリ・サイトに印刷ボタンを設置する JavaScript から print() を実行することで、ブラウザのプリントプロパティ画面を呼び出すことができます。 ※現時点で Safari は動作しません JavaScript Bootstrap ボタン a タグ input タグ まとめ アプリ設計時に、あらかじめ印刷時のスタイル(print.css)をデザインする必要がありますが、印刷ボタンを準備しておけば、アプリやサイト利用者のユーザビリティが向上します。 利用する場面は限られてしまいますが、あれば喜ばれる機能の一つだと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。