グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積[2]

2022.10.21

Photoshopでデザインを作成する際、素材をスマートオブジェクト化しておき、アセット書き出しの際にサイズを変えて（Retina用など）書き出すということがあると思います。

このとき、スマートオブジェクトで高解像度のデータを使っているにも関わらず、書き出した画像がぼやけることがあります。
ぼやける条件としては以下のようなものです。

・スマートオブジェクトにシャープ等のフィルターをかけている場合
・外部ファイルを直接スマートオブジェクトにした場合

特に2つ目の操作はあまり行うことがなかったため、遭遇した際に少し困りました。

●外部ファイルを直接スマートオブジェクトにした場合にぼやける
レイヤーを選んでスマートオブジェクト化するのではなく、「ファイル」＞「埋め込みを配置」や、ファイルを直接ドラッグ＆ドロップすることで、外部ファイルをスマートオブジェクト化することができます。
このとき、読み込むファイルの形式によって書き出しの際にぼやけます。

【ぼやける】
JPEG、PNG、GIF

【ぼやけない】
PSD、PSB

確認した形式は上記だけですが、外部ファイルを読み込む場合はPSD・PSBにしておくのが良さそうです。

個別ページ | コメント(0)

日本語・英語でフォントサイズを調整するJS

2022.08.30

日本語フォントと英語フォントを同時に指定した場合、フォントによっては和文と欧文でのサイズ差が気になる場合があります。（基本的には欧文が小さくなりがちです）
そういう場合に、欧文を判別してクラスを当ててくれる JavaScript があります。

wrapSingleByteTexts.js

デモを作成してみました。

欧文のみフォントサイズを調整して大きくしています。
判別できるのは半角英文字、半角数字、半角記号の3つで、spanで囲みクラスを当てることができます。

個別ページ | コメント(0)

ScrollHint 横スクロールの表示

2022.04.18

横に長いコンテンツ（表組みなど）を表示させる場合、画面のサイズによっては横スクロールがでてしまいます。
特にスマホで見ている場合、スクロールバーがみえずらく、横にスクロールできることがわかりずらい場合があります。

横長コンテンツの上には下記のような画像を表示させるようにしていました。

画像でもわかると思いますがScrollHintを使うと、動きを加えてよりわかりやすく横スクロールがあることを表示できます。
ScrollHint 公式サイト

設定はすごく簡単です。

（1）
上記ScrollHint公式サイトからダウンロードしたscroll-hint.cssとscroll-hint.jsをhead内でリンクする。
※CDNを利用することもできます。

（2）
横スクロールが出るコンテンツを下記divで囲う。

<div class="js-scrollable">〜</div>

（3）
下記スクリプトをコンテンツより後に記述。

<script>new ScrollHint('.js-scrollable');</script>

【例】

Col1	Col2	Col3
Lorem ipsum dolor sit.	Lorem ipsum dolor sit.	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit.	Lorem ipsum dolor sit.	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.
Lorem ipsum dolor sit.	Lorem ipsum dolor sit.	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam.

※オプションで色々と表示を変更できます。
公式サイトオプション↓
https://appleple.github.io/scroll-hint/#options

個別ページ | コメント(0)

jQuery UI でスライダーUIを実装

2022.03.04

jQuery UI を利用することで、つまみを左右にドラッグして操作するスライダーUIを簡単に作成することができます。 jQuery UI は2021年10月の時点で開発終了してしまいましたが、メンテナンスは継続されるようです。

基本の実装

●jQuery UI をダウンロード
以下のサイトからjQuery UI をダウンロードします。
その際、不要な機能を除外したり、好みのテーマを選ぶこともできます。
https://jqueryui.com/

●HTML
・ダウンロードした以下のファイルを任意の場所に格納し、jQueryと併せて読み込みます。
　また、imagesフォルダも同じ場所に格納しておきます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="jquery-ui.min.css" rel="stylesheet" />
<script src="jquery-ui.min.js"></script>

・<body>内に以下のタグを記述。


<div id="jquery-ui-slider"></div>

●JavaScript


<script type="text/javascript">
  $(function() {
    $('#jquery-ui-slider').slider({
      min: 0,
      max: 10,
      value: 0,
      slide: function( event, ui ) {
        /* ここに処理を記述 */
        console.log(ui.value);
      }
    });
  });
</script>

以上で実装完了です。

実装デモ

スマホ対応

スライダーはそのままではスマホで操作することができません。
「jQuery UI Touch Punch」を使うことで、スマホでの操作に対応させることができます。
ダウンロードサイトからダウンロードし、読み込みます。


<script src="jquery.ui.touch-punch.min.js"></script>

こちらは読み込むだけで完了です。

個別ページ | コメント(0)

画像の切り抜き

2022.02.15

普段の画像の切り抜きは、Photoshopなら「選択とマスク」や「すべてのオブジェクトをマスク」を使ってやっている方が多いと思います。

商品画像など背景が複雑じゃない画像ならスマホアプリの「Photo Room」がおすすめです。

スマホに画像を移す手間はありますが、無料の範囲でも一瞬で綺麗に抜いてくれます。
なんと人物の髪の毛もきれいに抜いてくれます！

1つ注意事項としては
出来上がった画像には右下にPhoto Roomのロゴが入ってしまうので、右下ギリギリに切り抜きたい対象物がある場合はロゴがかかってしまいます。
下のスペースを伸ばすのを忘れずに！
※有料で使えばロゴは入りません。

手間はありますが、数がある場合は断然早いです。
残念な点は、影を含めて抜いてはくれません。
影なしですっぱり抜かれてしまいます。

▼切り抜き前

▼切り抜き前後

※ロゴの入り方をお見せしたかったので背景をわざとグレーにしています。

画像の切り抜き

個別ページ | コメント(0)

iPadで表示している画面になんでも書き込み

2022.02.07

制作物をチェックする際、以前は印刷で行っていたことの代わりとして、iPadにテキスト素材や修正指示等を表示し見比べることがあります。
その際、紙であればそのままペンでチェックを入れたりメモ書きできますが、iPadでそれをする良い方法を見つけられずにいます。
ファイル形式によってはそのまま書き込めたりするものの、できればファイル形式やアプリによらず、見ている画面にそのまま書き込みたい。

ということで、現時点で一番良さそうだと思ったのが以下の方法です。

Apple Pencilでスクリーンショットに書き込み

Apple Pencilで画面の左下からフリックすることで、表示画面をスクショすることができます。
また、そのまま書き込みできます。

上部のタブでフルページを選ぶと縦長のページすべてに書き込むことができます。（これはアプリによってはうまくいかないことがあります）

スクショなので当然ファイル形式を選ばないため、書き込みたいときにすぐ使うことができます。
書き込んだ後は保存するか、不要ならそのまま削除することもできます。

さらに良い方法が見つかれば追記したいと思います。

個別ページ | コメント(0)

iOS 13以降のiPadを判定するユーザーエージェント

2020.08.19

iOS 12までのiPadはユーザーエージェントに文字列"iPad"が含まれているかで判別できました。
しかしiOS 13以降のiPadのSafariには「デスクトップ用Webサイトを表示」という機能が実装されており、それがオンになっていると（デフォルト）ユーザーエージェントに"iPad"の文字が含まれなくなるようです。
そのためユーザーエージェントでの分岐に追加をする必要があります。


var ua = window.navigator.userAgent.toLowerCase();
if(ua.indexOf('ipad') > -1 
  || ua.indexOf('macintosh') > -1 && 'ontouchend' in document){
    // iPad用の処理
}else{
    // それ以外の端末用の処理
}

"macintosh"という文字列が含まれており、タッチ操作に対応している。という条件で判定します。

個別ページ | コメント(0)

jQuery：複数のjsonファイルを読み込む

2019.07.17

複数に分けて管理しているjsonファイルを読み込み、すべての読み込みが完了した時点で次の処理を行う、ということをやったので忘れないようにメモ。

.when() を使うことで複数のファイルを扱うことができます。


$.when(
  $.getJSON("data1.json"),
  $.getJSON("data2.json")
)
.done(function(data1, data2) {
  // すべての読み込みが成功した時の処理
})
.fail(function() {
  // 失敗したときの処理
});

個別ページ | コメント(0)

jQuery：ページ遷移後のアンカーリンクの位置を固定ヘッダー分だけずらす

2018.10.03

ヘッダー固定のサイトでアンカーリンクを使用する際、そのままだとヘッダーの分だけコンテンツが隠れてしまいます。
同じページ内のアンカーリンクであればスムーズスクロールのJSに直接書き加えてしまったりするのですが、別ページへの遷移＋アンカーリンクの場合の対応を考えてみました。

以下のJSを遷移後のページに記述します。
要jQueryです。

$(function(){

    var headerH = 50; //ヘッダーの高さ

    $(window).on("load", function(){
      if(location.hash !== ""){
        var targetOffset = $(location.hash).offset().top;
        $(window).scrollTop(targetOffset - headerH);
      }
    });

});

ヘッダーの高さはサイトに合わせて変更してください。
これでヘッダー分下がった位置にスクロールされます。

ただこの手法、ページ内のすべての要素が読み込み終わってからの動作になるので、どうしても目当ての位置にスクロールされるまで時間がかかってしまい...。
どうにも気持ちの良くない感じになってしまうので、onloadを使わない手法に改善できないか考えてみたいと思います。

個別ページ | コメント(0)

Mac ターミナルを使ったパスワード

2018.05.23

現在使っているzip圧縮ソフト「MacWinZipper（無料版）」（MacOSからzip圧縮してWindowsに送っても文字化けしない圧縮ソフト）は便利なのだが、無料版はパスワードが4文字までしか設定できない。

zipファイルに5文字以上のパスワードをかけるために、ターミナルを使うことになった。検索すれば該当記事がヒットするが、備忘のため。

パスワードなしのzipファイルを作っておく
↓
ターミナル立ち上げる
↓
zipcloak＜半角スペース＞＜ZIPファイル名＞
↓
※＜ZIPファイル名＞は生成されているzipファイルをターミナル上にドラグ&ドロップで転写できる
↓
パスワード入力（入力、確認と２回）
↓
完成

個別ページ | コメント(0)

＜前の10件　　次の10件＞