Category Note

eyecatch_image

Adobe: Illustrator CC バウンディングボックスのリセットが選択できないときの解決法

Adobe Illustrator CC で図形を変形した後、バウンディングボックスをリセットしたいときがあります。 ところが、右クリックから「バウンディングボックスのリセット」を選択しようとしても、項目がグレーアウトして選択できないケースがあります。 今回はその選択できない状態から、バウンディングボックスをリセットする方法をメモしておきます。 目次 Adobe: Illustrator CC バウンディングボックスのリセットが選択できないときの解決法 まとめ Adobe: Illustrator CC バウンディングボックスのリセットが選択できないときの解決法 正方形のオブジェクトを回転した後、バウンディングボックスをリセットしようとすると、「バウンディングボックスのリセット」がグレーアウトして選択できません。 メニューから [オブジェクト] > [シェイプ] > [シェイプを拡張] を実行します。 シェイプを拡張すると、「バウンディングボックスのリセット」が選択できるようになりました。 無事バウンディングボックスがリセットされました。 まとめ シェイプを拡張してしまうと、オブジェクトの角丸の変更が、ワークスペースのマニピュレータ上でできなくなってしまいます。 シェイプ拡張後、バウンディングボックスをリセットしても、メニューから [オブジェクト] > [シェイプ] > [シェイプに変更] を実行すれば、元の状態に戻すことが可能です。 直感的にオブジェクトの外観を操作することを目的とした場合、この UI の仕様は適切だと思うので、ユーザーは慣れるしかないと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
eyecatch_image

Adobe: Illustrator CC アートボードを再配置する

Illustrator にアートボードが登場してから随分経ちますが、複数ページのデザインを作成するときに非常に便利です。 アートボードを追加していくと、どんどん横へ増えていきますが、アードボードの数が増えていくにつれ、管理が大変になってきます。 今回は Adobe Illustrator CC でアートボードを再配置する方法を説明します。 目次 Illustrator CC アートボードを再配置する まとめ Illustrator CC アートボードを再配置する アートボードが 6 つ並んだ状態です。 これでは 1 番目のアートボードから 6 番目のアートボードへのアクセスが困難です。 メニューから [オブジェクト] -> [アートボード] -> [再配置] を選択します。 アートボードを再配置 で、レイアウト、横列数、間隔 を入力後 [OK] します。 アートボードが 2行 3列 に再配置され、リソース全体が見渡しやすくなりました。 まとめ 個人的に Illustrator は、Photoshop より利用頻度が高いアプリケーションです。 日本語入力、縦横組ができて、ベジエ曲線さえ使えれば Illustrator でなくてもいいはずなのですが、CC になってから色々便利な機能が実装され、そのうちのいくつかはなくては困るものも存在します。 Adobe CC Photoshop/Illustrator のサブスクリプションが、アマゾンプライム並みになれば、世界中が平和になるような気がします(笑) この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML5: Bootstrap4 対応 LP(ランディングページ)テンプレート

Bootstrap4.0 に対応した LP の HTML テンプレートを作成しました。 個人用メモとしての投稿につきスタイルシートは付属しないため、一部表示不具合がありますが、プロジェクト LP 作成時のたたき台になるかと思います。 ゼロベースからのページ作成は高コストになってしまうので、お役立ていただければと思います。 目次 Bootstrap4 対応 LP(ランディングページ)テンプレート まとめ Bootstrap4 対応 LP(ランディングページ)テンプレート まとめ LP はどれも似たような構成になりがちですが、各種マーケティング手法を取り入れ、クロスメディア展開されたひとつの手段としての LP であれば、今回のテンプレート化された HTML コードは万能です。 コードをコピペ後に構成を組み立て、スタイル付けすることで、コストを大幅に削減できますので、ご活用いただければと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Mac: Visual Studio Code 上で SCSS をコンパイルする

Visual Studio Code ユーザーであれば、SCSS (SASS) をコンパイルしたい場合、Visual Studio Code のタスクランナーを利用すれば簡単に実行可能です。 今回はその方法を説明したいと思います。 目次 Visual Studio Code 上で SCSS をコンパイルする まとめ Visual Studio Code 上で SCSS をコンパイルする プロジェクトフォルダを Visual Studio Code で開きます。 以下はプロジェクト内に package.json や tasks.json がない場合の手順を説明しています。 node-sass をインストール node-sass がグローバル、もしくはプロジェクトにインストールされていない場合、以下をターミナルで実行します。 package.json の作成とスクリプトの追加 プロジェクト内に package.json がない場合、以下をターミナルで実行し package.json を作成します。 package.json に node-sass を実行するためのスクリプトを追加します。 以下の例はプロジェクトルートの scss フォルダの styles.scss をコンパイルし、プロジェクトルートの css フォルダに styles.css を出力します。 tasks.json の作成 Visual Studio Code から Shift + Command + P -> Tasks: Configure Task -> Others でプロジェクトルートに tasks.json が作成されます。 tasks.json を Visual Studio Code で開き、node-sass のタスクを追加します。 タスク実行 Visual Studio Code から Ctrl + Shif + B でタスクランナーを実行すれば SCSS がコンパイルされます。 まとめ tasks.json に node-sass のタスクを追加すれば、次回からは、タスク実行で SCSS がコンパイルされます。ターミナルは必要ありません。 Visual Studio Code で静的ページに SCSS だけ使用したコーディングを行いたい場合、もっとも簡単な方法の一つかと思いますので、ぜひお試しください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
eyecatch_image

iPhone: SIM フリー iPhone で SMS が送信できない場合の対処法

SIM フリー iPhone(MVNO)で キャリア端末へ SMS を送信した際、メッセージ送信が失敗するケースがあります。 メッセージの多くは iMessage や LINE 等で行うため、SMS 送信となった場合、なぜ送信できないか解決できずハマりました。今回はその解決方法をメモしておきます。 目次 シムフリー iPhone で SMS が送信できない場合の対処法 まとめ シムフリー iPhone で SMS が送信できない場合の対処法 SMS が遅れない原因は次の2つかと思いますので、ご確認ください。 設定を確認する [設定 App] -> [メッセージ] -> SMSで送信 を ON にします。 これをやってないと SMS 送信自体ができません。 文字数を確認する 上記の設定をおこなっているにも関わらず、何度送信を試しても失敗する場合があります。 ショートメールでは 文字数制限が60文字まで となっているので、送ろうとしているメッセージが長くなりすぎていないか確認してみてください。 普段 iMessage に慣れているため、このような初歩的なところでハマってしまいました。 まとめ iPhone 同士は iMessage で問題なくメッセージのやり取りが行えますが、送信先が Android や電話番号しかわからない場合、SMS での送信となってしまいます。 そういった場合、今回のチェックポイントを確認すれば問題解決できるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

iOS: ミュージック App で歌詞を表示する方法

iOS 11 になってから消えてしまったように思われるミュージック App の歌詞表示ですが、すごく分かりにくい方法でアクセスが可能です。 今回はミュージック App での歌詞表示のメモとなります。 目次 ミュージック App で歌詞を表示する方法 まとめ ミュージック App で歌詞を表示する方法 歌詞が埋め込まれている曲を表示し、項目自体を「フォースタッチ(強く押し込む)」します。(このファーストアクセスの難易度が高いのが問題ですね) あとは「歌詞」項目をタップすれば歌詞が表示されます。 以前のバージョンでは、次の曲が再生されれば対応する歌詞が自動で更新されましたが、現行バージョンでは歌詞は最初の表示のまま変更されません。。 まとめ バージョンを重ねるにつれよくなっていると思いたい iOS ですが、ミュージック App に関しては多くの機能によるトレードオフにより、様々な不便を強いられている気がします。 曲データに歌詞を埋め込み、それを閲覧するユーザーは全体数からすると非常に限定的かもしれませんが、この辺はもう少しユーザビリティを改善して欲しいところです。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

CSS3: A4サイズ(ISO 216規格)比率のスタイルを作成する

A4 サイズを Web 上で描画したい場合、パーセント比率で指定した div を作成すれば簡単に実現できます。 しかし、レスポンシブデザインで可変する横幅に合わせ A4(ISO 216 A列)の縦横比率を、維持した高さを定義しようとすると、少々面倒なことになります。 今回は、A4サイズ(ISO A列)を例に、可変する矩形を描画する方法をメモしておきます。 目次 A4サイズ(ISO 216規格)比率のスタイルを作成する まとめ A4サイズ(ISO 216規格)比率のスタイルを作成する CSS の矩形の比率は CSS: 用紙サイズの規格と dpi (ピクセル)の対照一覧 より用紙サイズの比率をパーセンテージに変換しています。 HTML CSS まとめ 実際の紙媒体の規格を、Web 上で再現する必要はあまりありませんが、印刷やPDF プレビューを行いたい場合、必須となるテクニックだと思います。 比率の部分をクラス化すれば、汎用的なスタイルを定義できますのでお役立てください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

Terminal: zshrc エイリアスのメモ(Git コマンド編)

Terminal のシェルはずっと zsh を使用しています。 今回は、自分が zshrc で設定している Git コマンドをメモしておきます。 目次 zshrc エイリアスのメモ(Git コマンド編) まとめ zshrc エイリアスのメモ(Git コマンド編) git pull と git push がどうしても紛らわしくなってしまいますが、ずっとこの設定でやり過ごしています(笑) まとめ エディタや IDE 等の設定を自分流にカスタマイズしすぎるのは良くない気がしますが、シェルだけは別だと都合よく考えることにしています。 zshrc 自体を公開している方もいらっしゃいますが、自分の場合、あまり使わない設定やコメントアウトが多く雑多になっていたため、今回は Git コマンドのエイリアスのみを公開しました。 ある程度 zshrc の内容が落ち着いてきたら、丸ごと zshrc をさらけ出したいと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: div, section, article の使い分け方

今更ですが、今回は HTML5 コーディング時にいつも迷ってしまう、div, section, article の使い分け方をおさらいしておきます。 目次 div, section, article の使い分け方 まとめ div, section, article の使い分け方 最初に言っておくと、HTML5 で登場した article や section をわざわざ使用しなくても div だけを使っても問題ない です。 このことを前提として、以下に詳細を説明します。 div div を使うケースの多くは レイアウトやビジュアルデザインが主な利用用途 になっているかと思います。 div タグ自体に文章構造上の意味がないため、冒頭で説明した div だけを使ったコーディングで問題ない という結論になるわけです。 div 自体に意味はないため section や article を内包しても問題ありません。 section section は div と違い、文脈的な意味がある コンテンツに対し使用します。 また、section 内には hx(h1) が必須 となり、コンテンツが独立して成立しない 場合に用います。 section 内には、section もしくは article を配置できます。 article article は section 同様、文脈的な意味がある コンテンツに対し行います。 section との違いは article 内のコンテンツが 独立して成立する 場合に用います。 内側の article が、外側の article の内容と関係がある場合、article を内包(ネスト)することができます。 各 article 内に section を内包(ネスト)することもできます。 div -> section -> article という順番で、よりセマンティックになっていく感じです。 まとめ HTML5 から登場した section と article ですが、WordPress 等のブログエンジンやテンプレートエンジン等で、あらかじめ設定済みのものをそのまま使うケースが多いです。 実際のところコンテンツをグルーピングしたい場合、div を使用すれば何も問題はないのですが、今はユニバーサルデザインを意識し開発することも求められますので、section や article を使い分け、各コンテンツの意味を考えながらコーディングしていくことも重要だと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML: よく使う EJS のサンプルコード

必要に迫られ、今さらですが Node.js で HTML テンプレートエンジンの EJS を導入しました。 今回は EJS のよく使うサンプルコードをメモしておきます。 目次 よく使う EJS のサンプルコード まとめ よく使う EJS のサンプルコード 基本 の中で JavaScript コードを実行することができます。 コメント EJS コメントです。コンパイル時 HTML には出力されません。 インクルード 静的 HTML 出力として EJS を使う場合、主な用途はインクルードだと思います。 以下は index.ejs から _include フォルダ内の head.ejs (ejs 拡張子は省略可)をインクルードし headValue の値を渡すサンプルです。 index.ejs head.ejs 出力 文字列を出力する場合と、HTML 要素を出力する場合で2つの記法に分かれます。 (文字列を出力したい場合) (html 要素を出力したい場合) ループ おもにリスト等で利用する機会が多いかと思います。 まとめ ウェブサイトやウェブアプリの仕様等を HTML でプレゼンしたい場合、EJS のような HTML テンプレートエンジンが役に立ちます。 あらかじめ EJS で再利用性の高い要素をコンポーネント化しておけば、少ないコーディングで HTML 出力ができ、作業効率アップ、コストダウンにつながるかと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから