2021-07-14

UI/UXについて少し勉強した

UI/UX

UXエンジニアに興味を持ってUI/UXの本を読んだので、特に覚えておきたい部分を備忘としてメモ。

デザインについて

デザインとは

「デザイン=設計」。デザインとは見た目だけではなく、機能を有するもの。

デザインの目的

そのデザインが持つ機能や働きにより、何らかの課題を解決すること。（使いにくいものを使いやすく、分かりにくいものを分かりやすくする。）

デザインの必要性

必要とされる機能に代替手段がないとき、デザインの重要度は下がる。（使いづらい・分かりづらい等の不満があっても、その機能を使うしかないため。）機能が一般化したとき、競合との差別化要因としてデザインの重要度は高まる。

UiとUX

UIとは

ユーザーインターフェース(User Interface)。ユーザーとサービスの接点となるもの。直接的・間接的に触れて操作ができるもの。

直接的な例）マウス、キーボード、タッチパネルなど。間接的な例）Webサイトのリンクやボタン。

UX

ユーザーエクスペリエンス。ユーザーがサービスから受ける体験のこと（使いやすい・使いづらい、情報を得られるまでが早い・遅いなど）。

UIとUXの違い

UIは客観的であり目に見える。一方、UXは主観的であり目に見えない。（=設計・評価が難しい。）

2021-03-27

try ... catch についての学習メモ

JavaScript

JavaScriptのtry ... catchについて今まで使う機会がなく、何も知らなかったので勉強してみたメモ。

結論から言うと、エラーが発生した場合でも処理を停止させないという特徴があるようです。

// 未定義の変数iによりエラーが発生する

// 通常の処理
const a = 1;
const b = a * i; // コンソールにエラー出力
console.log( 'hoge' ); // この行は実行されない

// try ... catchによる処理
const a = 1;
try {
  const b = a * i; // 例外が発生し、catchブロックに処理が移る
} catch (e) {
  console.error( e ); // エラー内容を引数で受取り、エラーを出力
}
console.log('hoge'); // 実行される

関数などに想定していない型の引数を渡される可能性があるが、エラーにより後続の処理を止めたくないといった場合に使うような感じでしょうか。

またthrowを使うことにより、意図的に例外を発生させることもできるようです。

function getNumber(x){
  if ( typeof x !== 'number' || isNaN(x) ) {
    throw new Error( 'Parameter is not a number.' );　// 引数が数値ではない場合に例外を発生させる。
  }
  return x;
}

try{
  getNumber( 's' ); // 例外発生により関数の実行が停止し、catchブロックに処理が移る。
} catch(e) {
  console.error(e);　// エラー出力 'Error: Parameter is not a number.'
}

本当にざっくりですが、少し理解できてよかった。サイト制作で使う機会は来るのかな…

2021-03-22

同一のカスタムフィールド値を持つ投稿の前後記事リンクを出力する

WordPress

前に一度やったことがあるが忘れていたのでメモ。

ぜろみやさんのブログでやってるの見たな…と思いつつ、まず自力でやってみようと思い実装しました。以下ソース。

<?php
/**
 * 同一のカスタムフィールドを持つ前後リンクの出力
 * 
 * 取得手順
 * (1) 対象となるカスタムフィールドの投稿をサブループで全件取得する。
 * (2) (1)で取得した投稿内での、現在の記事のインデックスを取得する。
 * (3) (2)で取得したインデックスをもとに前後の記事のパーマリンクを取得する。
 * (4) 取得した前後リンクを出力する。
 */

// (1)
$current = $post;
$currentID = $current->ID;
$postIDs = array();

$args = array(
  'post_type' => $current->post_type, // 任意の投稿タイプ
  'posts_per_page' => -1, // -1で全件取得する
  'post_status' => 'publish',
  'order' => 'DESC',
  'orderby' => 'date',
  'meta_query' => array(
    array(
      'key' => 'hogehoge', // 任意のカスタムフィールド名
      'value' => 1,
      'compare' => '=',
    )
  )
);

$new_query = new WP_Query( $args );
  if( $new_query -> have_posts() ){
    while($new_query -> have_posts()){
      $new_query -> the_post();
      $postIDs[] = get_the_ID();
  }
}
wp_reset_postdata();

// (2)
$currentIndex = array_search( $currentID, $postIDs );

// (3)
$prev_link = $currentIndex === count($postIDs) - 1 // 表示している記事がもっとも新しいかどうか判定
          ? ''
          : '<a href="' . get_permalink($postIDs[$currentIndex + 1]) . '">以前の記事へ</a>';

$next_link = $currentIndex === 0 // 表示している記事が最新かどうか判定
          ? ''
          : '<a href="' . get_permalink($postIDs[$currentIndex - 1]) . '">新しい記事へ</a>';
?>

<?php // (4) 
if ( $prev_link || $next_link ) : ?>
<ul class="adjacentPostLinks">
  <?php if ( $prev_link ) : ?>
    <li><?php echo $prev_link; ?></li>
  <?php endif; ?>
  <?php if ( $next_link ) : ?>
    <li><?php echo $next_link; ?></li>
  <?php endif; ?>
</ul>
<?php endif; ?>

どの記事が前後になるか？は実際に記事を取得してみないとわからないため、サブループで記事を取得してそこから抽出する形になっています。

実装した後にぜろみやさんの記事を見てみたら、同じく全件取得する形で実装されており一安心。変な実装の仕方ではないようなのでよかったです。

参考

WordPress 特定のカスタムフィールドに値がある記事だけで「前へ」「次へ」を実装 - めしくいドットコム・技術編

2021-03-19

Google FontsのNoto Sans JPにfont-feature-settingsが効くようになってる

css

タイトルの通りなのですが、いつからかはわかりませんがfont-feature-settings: 'palt' 1が有効となり文字詰めを行えるようになってるみたいです。

See the Pen Noto Sans JP font-feature-settings テスト by saiko (@saiko1988) on CodePen.

また文字詰めできなくなるとか起きないかな…信用していいものか…

2021-02-22

非同期で取得したデータがIE11で文字化けする場合の対処法

JavaScript 非同期処理

axiosでデータを取得後にDOM操作を行おうとしたところ、IE11のみ文字化けする事例があったのでメモ。

発生状況

axios: v0.21.1
IE11
Chrome, Firefoxでは起きず

以下のようにresponseType: 'document'を指定して取得したところ、IE11のみ文字化けが発生。

axios.get( '取得したいデータのURL', { responseType: 'document' } )
  .then( res => res.data )
  .then( data => {
    console.log( data ); // IEで文字化けする
  } );

取得したいデータの文字コードがUTF-8でない可能性もあったのですが、根本の原因はわからず…。

ただresponseType: 'document'を指定しない場合文字化けは発生しないので、いったん無指定で取得した後にDocumentオブジェクトに変換すればよさそう。

何か方法はないかなーと検索したところ、DOMParserというAPIがありました。

DOMParser - Web API | MDN

DOMParser インターフェイスは、 XML や HTML ソースコードを文字列から DOM の Document に解釈する機能を提供します。

上記のコードを以下のように修正。するとIE11でも文字化けなく取得することができました。

axios.get( '取得したいデータのURL' )
  .then( res => res.data )
  .then( data => {
    const domParser = new DOMParser();
    const doc = domParser.parseFromString( data, 'text/html' );
    console.log( doc );
  }

2021-02-10

dl要素内のdivの使い方についてメモ

HTML

HTML5.2よりdl要素内でdiv要素が使用できるようになったのですが、誤解していた部分があったのでメモ。

単純に「dl要素の子孫要素としてdivが使える」と覚えておりdiv要素をdd要素のラッパーとして使おうとしていたのですが、HTML Living Standardに反する使い方だったようです¹。

<!-- これはNG -->
<dl>
  <dt></dt>
  <div>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </div>
</dl>

dd要素の前に配置される兄弟要素はdtまたはdd要素と決まっており、この点が仕様違反となっていました。

つまり、dl要素内でdivを使う際には、dtおよびdd要素をまとめてラップする形で使用するのが仕様に沿った使い方となります。

<!-- これはOK -->
<dl>
  <div>
    <dt></dt>
    <dd></dd>
    <dd></dd>
    <dd></dd>
  </div>
</dl>

ただ上記の形では、dd要素群をひとまとまりに扱いたい場合に少し不都合があります。そのため今回は仕様に合った形で下記のように書き換えました。

<!-- 仕様に合う形に書き換え -->
<dl>
  <dt></dt>
  <dd>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </dd>
</dl>

ネストが増えているのが少し気持ち悪いですが、そこは仕方ないということで。

参考

2021.2.10現在↩

2021-02-06

配列に変換し、かつmapで処理する