カテゴリー: 社内の様子

Javascriptの ‘文字列’.length の罠

Javascriptから少し離れると忘れてしまう問題。
最近、立て続けで見かけたので備忘録として書きます。

先に結論だけ書くと、現状では完全な解決は難しいということです。

lengthについて

MDNによる length について書かれたページです。
こちらの内容をほぼなぞったものになります。

String length – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length

Javscript で文字列の長さを取得したいときはまず length を使うことを考えるでしょう。

const mojiretsu1 = 'mojiretsuhadoushutokusuruka';
console.log(mojiretsu1.length);
// 27
取得できました。
文字列を日本語に置き換えても問題なく取得できます。
const mojiretsu2 = '文字列はどう取得するか';
console.log(mojiretsu2.length);
// 11

何も問題はないように見えます。

全てはうまくいっています。

要素は言葉を切り分ける

MDNにある説明を引用します。

String length – JavaScript | MDN

細かい説明はMDNを見ていただくとして、ここで重要なのは length が文字の数ではなくコードユニットの数で表されることです。

以下に例を示します。

const emoji = '🏴󠁧󠁢󠁥󠁮󠁧󠁿';
console.log(emoji.length);
// 14

なんだかよく分からないこの謎の旗 🏴󠁧󠁢󠁥󠁮󠁧󠁿 の length は14ものコードユニットを内包します。
多すぎる、修正が必要でしょう・・・。

これを見てあなたはすぐに「絵文字禁止にしよう」と思うかもしれません。
しかし、それはベストな解決方法ではないことにすぐに気付くでしょう。

const umaiYasuiHayai = '𠮷野家';
console.log(umaiYasuiHayai.length);
// 4

𠮷野家.length は4。
𠮷の length は2となっているため、このような結果となります。

length はどう生きるか

MDNにある対応例を引用します。

function getCharacterLength (str) {
    return [...str].length;
}
console.log(getCharacterLength('🏴󠁧󠁢󠁥󠁮󠁧󠁿'));
// 7
console.log(getCharacterLength('𠮷野家'));
// 3

これにより ‘𠮷野家’ に対しては3を得ることが可能になります。
しかし、謎の旗は7となってしまい、依然、正しい文字数を得ることができません。

見ての通り、この方法は完璧ではありませんが、いまのところ、これはいくらかマシな方法といえます。
厳しい現実ですが、私たちは常に前を見据える必要があるでしょう。

未来へ

将来の話になりますが、Intl.Segmenter という新しい仕様によりこの問題は解決される見込みです。内容は省きますが、これを書いている現在では一部の環境でしか対応していません。Polyfill は存在するようですので、導入可能な環境であればそちらを利用できるでしょう。

また、length の話からは逸れますが、’文字列’.split() 等でも同様の問題を抱えています。厄介な問題ではあるのですが、Javascript を常に触っていることでもない限り忘却しがちなところも輪にかけて厄介な点です。その度に ‘文字列’.length には期待して、がっかりさせられ、また忘れて期待してしまうのです。

噫無情。

というほどでもないですが、なるべく早く解決されることを期待したいところです。


大好きなルポライター村田らむ

村田らむさんという方をご存知でしょうか。
グレーゾーンな問題をテーマにしたことをよく取材されています。
(危険な潜入取材しているイメージしかない)
そんな村田らむさんの取材エピの中でも好きなエピソード1つ紹介したいと思います。
色々あるけどここには書けない笑

閉鎖病棟潜入

当時勤めていた会社で「閉鎖病棟の中がどうなっているか知りたいから入院してきてよ」というところから閉鎖病棟への潜入取材が始まります。
無事入院することが出来たのですが、入院が必要な患者と診断されているため感情を全て失う薬を投与され、しかも閉鎖病棟のため出ることが出来なくなるのです。
薬漬けの日々。。。
ここから先は色々やばめなので動画を見てください。
https://www.youtube.com/watch?v=ZKj0Ux29zhc

内容が内容なので、ほとんど紹介していないですが一度知ったらファンになるはず。
是非、動画見てみてね。


Adobeの新たなジェネレーティブAI「Adobe Firefly」で何ができるのか

3月21日ついにAdobeがAI画像生成ツールを発表しましたね。
その名も「Adobe Firefly」

 
アドビ、新たなジェネレーティブAI「Adobe Firefly」を発表
https://www.adobe.com/jp/news-room/news/202303/20230321_adobe-unveils-firefly.html
 
まだ、Bata版ですが、製品版が出るのが楽しみです。
Bata版を触りたい場合は「 https://firefly.adobe.com/ 」の右上のボタン「Request access」から、申請をすることができます。
大きな特徴として「商業利用に特化したジェネレーティブAI」という点。
(現在、プライベートベータ版)
 
今までの画像生成ツールなどは、どの画像を使ってAI訓練されているか未公開なので、著作権もグレーな状況。
 
「Adobe Firefly」は「Adobe Stockライブラリ」や「著作権切れ」などのコンテンツを利用するなどしてかなり安心して利用できそうです。
Adobe Stockの画像や一般に公開されているライセンスコンテンツや著作権が失効しているパブリックドメインコンテンツを対象としており、画像やテキストエフェクトを中心に、商業利用として安全性を考慮したコンテンツを生成するように設計されています。
https://www.adobe.com/jp/news-room/news/202303/20230321_adobe-unveils-firefly.html
 
では具体的に何ができるか見てみましょう。
(すぐ申請はおりないようで、私はまだ触れるように触れてません。なので、同じ紹介動画の該当箇所をペタペタ貼っているのでご了承を…)

Text to image

テキストを入力するだけで画像を生成できます。
https://youtu.be/_sJfNfMAQHw?t=4
今まではAI画像生成などは操作や準備が大変なのですが、わかりやすい操作画面で使いやすそうですよね。
写真風なのかアート風なのかなども細かく設定できるようです。

Extend image

画像の足りない部分も簡単に増やしてくれます。
https://youtu.be/_sJfNfMAQHw?t=10

Inpainting

人が着ている服を指定して、テキスト入力するだけで、その内容に沿った服に変更できるようです。
https://youtu.be/_sJfNfMAQHw?t=14

Smart Portrait

人の表情や年齢も簡単に変えれそうです。
https://youtu.be/_sJfNfMAQHw?t=24

Depth to image

写真をアップロードして、変更したいイメージのテキストを入力するだけで、写真のイメージが変更できるようです。
https://youtu.be/_sJfNfMAQHw?t=30

3D to image

3Dオブジェクトとテキストを組み合わせるだけでそのイメージ画像が簡単にできるようです。
「芝生の丘お城」にしたり「お菓子のお城」にしたり。
https://youtu.be/_sJfNfMAQHw?t=36

Text to template

デザインテンプレートもたくさん作ってくれるようです。
例えば「ハッピーバースデーのテンプレートを作って」と書くだけで様々なデザインパターンを作ってくれます。
https://youtu.be/_sJfNfMAQHw?t=43
それ以外にも様々なことが簡単にできるようになるようです。
安心して商用利用できるようになるのも心強いですよね。

【Google Chrome】検証ツールの小ネタ(レスポンシブ編)

コーディングや開発をする方なら、日頃からGoogleChromeの検証ツールはよく使われていると思います。
今回はレスポンシブデザインを確認する時に、個人的に便利だと思っている検証ツールの小ネタを紹介したいと思います。

レスポンシブモードを有効にする🖥️

右上の「デバイス切り替え」アイコンをクリックします。
ブラウザ表示がレスポンシブ表示に切り替わります。

レスポンシブモードのオプション🛠️

デバイスのフレームを表示

右上の縦の三点リーダーアイコンをクリックして「デバイスのフレームを表示」を選択します。
対応している一部の機種に限りますが、表示しているデバイスのフレームが表示されます。

メディアクエリを表示

右上の縦の三点リーダーアイコンをクリックして「メディアクエリを表示」を選択します。
この機能を有効にすると、サイト上で使用しているメディアクエリを視覚的に表示してくれます。
サイズの指定方法の違いが色ごとにわかりやすく表示されます。

max-width(**px以下)
max-widthとmin-widthを使用(**px以上、**px以下)
オレンジ min-width(**px以上)

スクリーンショットをキャプチャ

表示中のレスポンシブサイズのスクリーンショットを撮影してくれます。
ブラウザ拡張などでスクリーンショットを撮影している方も多いかと思いますが、ブラウザのデフォルト機能だけでスクリーンショットを撮影できるので手軽に使えます。
また「デバイスのフレームを表示」が有効で、フレームが表示されている場合、フレーム込みでスクリーンショットが撮影されるので、撮影後に別アプリなどでモックにはめ込む作業も必要ありません。

表示端末の追加📲

レスポンシブモードでシミュレートできるデバイスの追加も可能です。
ツールバー上部の[サイズ]をクリックしてデバイス一覧を開き、[編集]をクリックします。
好きなデバイスや自分でカスタマイズしたデバイスを追加することもできます。
特殊な環境やサイズのデバイスを追加する際に、非常に便利な機能になっています。

検証ツールは奥が深い…

レスポンシブのデザインやコーディングをする機会は多いと思います。
地味な機能の紹介ばかりですが、少しでも検証ツールの機能を活用して効率よい作業の手助けになればと思います。
そして、検証ツールには他にも数え切れないほどの機能があるので、今後も少しずつ紹介していけたらと思います…🫠


2022年に習得した新しい習慣

2022年も残す所あと僅か。
今年も色々あったと思うのですが、あっと言う間に過ぎ去ろうとしています。

厄年である私が新しい習慣を身につけることは中々ないのですが、珍しく新習慣を会得しました。

それは…。

 

トイレ掃除です。

 

2022年5月からですが、ほぼ毎朝トイレ掃除をしています。
ズボラな私が半年以上続けられるとはちょっとした奇跡かなと思ったりしています。

「トイレの神様」って歌が流行った時期もありましたが、改めて調べてみると存在するようで、「烏枢沙摩明王(うすさまみょうおう)様」というらしいです。

 

それはそれはキレイな女神様がいるんやで〜♪

 

と、聞いたことがあったので、どんな神様かなと期待して調べてみると「烏枢沙摩明王様」というらしく、めちゃくちゃ怖い顔をして、全身火炎に包まれた火の神様のようです。

最初のイメージと違うなと思ったのですが、昔のトイレは伝染病などの感染源になりやすい場所だったので、魔の入口のような考えがあったとのこと。

そのため怖い顔して、炎で浄化して、悪いものから守ってくれている存在として伝えられているようです。

 

私がトイレ掃除を初めたきっかけは、厄年だからだったからかもしれません。
今ではやらないと、落ち着かなくなっています。

 

まだまだトイレ掃除、初級者の私ですが、これからも続けてみようと思います。