2024年3月11日月曜日

Excelから変換したPDFが携帯電話で表示されない

管理してるWEBサイトに Excel で作成されたファイルを表示するために、PDFに変換してアップします。よね?
うちもそうしてます。
日本語のファイル名にならないように英数名のファイルにしてアップロード
よし。これで完了、っと。

携帯(iPhone)で見えないとのご連絡!

いや、いつもやってることなのに。
どれどれ、と自分の iPhone で開いてみると・・・

 ほんとだ!
左上1/4くらいしか表示されません!
で、しばらくすると全体が表示されます・・・・
いや、これじゃ、あかんでしょ・・・

PDF に変換する!

Excel でPDFファイルとして保存するには、2つの方法があります。

ひとつは、「ファイル」メニューから「Adobe PDF として保存」を選ぶ方法です。
今回は、こちらの機能を使ってPDFに変換しました。

PCではちゃんと表示されるのにな・・・

別の方法を試してみる

もう一つ。
「ファイル」「名前を付けて保存」で、ファイル名の下のコンボボックスで「PDF(*.pdf)」を選ぶ方法です。

今回のファイルの場合、こちらを使うと、PDFのファイルサイズが少し小さくなりました。

まとめ

2番目の方法で出力したファイルをWEBサイトに公開したところ、iPhone でもサクッと表示されるようになりました。
同じ悩みを経験した場合は試してみてくださいまし。

めでたしめでたし。

2024年3月10日日曜日

WEBアプリ[Enter]キーでフォーカス移動の問題点

HTMLの[Enter]でフォーカス移動

むかしはねぇ。業務系アプリのほとんどで、入力枠で[Enter]押されたら、次の入力枠にフォーカスを移すのって、当たり前でしたよね。
ところがどっこい。HTMLでの[Enter]は submit() がデフォルトになってる。
業務系WEBアプリとしては、[Enter]キーでフォーカス移動は、ユーザーからのご要望も強くありますね。
と、いうことで。
[Enter]キーでのsubmit()をフォーカス移動にしてたのが、次のコードです。

$(function(){
  $("input").on("keydown", function(e) {
    if ((e.which && e.which !== 13) && (e.keyCode && e.keyCode !== 13)) 
    {
      return true;
    }
    else
    {
      var count = $('input').length;
      var current_index = $('input').index(this);
      for(let index = current_index; index < count; index++)
      {
        var next_input = $('input')[index + 1];
        var is_hidden = $(next_input).is(':hidden');
        var is_readonly = $(next_input).prop('readonly');
        var is_button = $(next_input).is(':button');
        if(is_hidden || is_readonly || is_button)
        {
          continue;
        }
        $(next_input).focus();
        return false;
      }
      $('input')[current_index].blur(); 
      return false;
    }
  });
}(this));
textarea に移動しない!と思った人は変更してくださいw

MacOSの[かな]キーでフォーカス移動してしまう!

Mac 使いのお客様から、こんなクレームが来ました!
フォーカスが移動する、ってのなら上記コードが原因のわけです。
と、いうことで。
MacOS 機を入手して動きを調べてみました。

「かな」キーの keyCode が 13 !!!

なんでこんなことしてんですかねーw
数字(と記号の)郵便番号入力から、住所欄の入力に移動して「かな」キーを押すと、住所欄すっ飛ばして「名前」のところにジャンプしてしまうわけですw
『使えねぇ』と思われても仕方ありません。ええ。

keydown を keypress に

  $("input").on("keydown", function(e) {
この部分を

  $("input").on("keypress", function(e) {
に変更することで、対応できました。

まとめ

ちなみに、「かな」キーのkeydownでのkeyCode は 13 でしたが、 keypress での keyCode は 229 が入ってきます。

HTMLって日本語のことちっとも考えてくれてないよね。
IE にあった、IME の制御機能、入れてほしいよね・・・

とりあえず動いた。
めでたしめでたし。


参照
Enterキーを無効にする方法
日本語入力時のキーイベントの仕様変更と対策