横浜市磯子区、横浜港を見渡すことができる高台に、ある問題を抱えたお宅がありました。建築家。この家が抱える問題、それは・・・
![『未来のミライ』建築家(お父さん)の匠の仕事ぶりにツッコミを入れる皆さん](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb78ba798edca13fec24e5ef782aee4356ef92be/height=288;version=1;width=512/https%3A%2F%2Fs.togetter.com%2Fogp2%2F800e83492a34f1725e450e7065b4b00e-1200x630.png)
こんにちは、フロントエンドエンジニアのザワです。 この夏、いい思い出はつくれていますか? そうでもない? でも、嫌な思い出は全部圧縮しちゃえばいいじゃない! ということで、今回はフロントエンドのパフォーマンスを考える上で避けては通れない、画像圧縮のタスクを作ってみたいと思います。 「作る」と言っても、公開されているnpmパッケージを組み合わせて画像圧縮タスクを作っていくかたちになります。出来合いの惣菜を組み合わせて、簡単にお弁当を作るイメージですね。記述量も短く、すぐにできてしまうためにちょっと不安になりますが(これで本当にうまく動いているのかな、ってね)、惣菜だってレンジでチンするだけで美味しく食べれるんだから、理屈としては充分でしょう。 ちなみに「画像圧縮しよう」と心に決めた場合、npm scriptsだったり、ツールを使ったり、など選択肢はたくさんあります。 我が社が誇るスーパーフル
デザイン制作で時間のかかる工程、プロセスのひとつが、フォント書体の組み合わせ。色々ありすぎて、結局いつも同じフォントを使っているなんてひともいるかもしれません。 今回は、そんな面倒で時間のかかるフォント選びをより手軽にし、デザイン工程をスピードアップできるフォント組み合わせ素材 Font Combination Library が公開されていたのでご紹介します。 KK UI Store が発表したこの素材パッケージには、Google Fontsで人気の書体を組み合わせた、Sketch と Adobe XD用のできあいテンプレート8種類を収録しています。レイアウトされている書体を変更したり、ほんの数クリックでフォントの色やサイズもカスタマイズできます。 収録されているフォントの組み合わせは? ここで収録されているテンプレートは、ウェブサイトやスマートフォン向けモバイルアプリ、雑誌などを想定し
Pythonを使っている人にとってはお馴染みのJupyter Notebook。コードと文章を一緒に書けるのでプログラミングに関連したコンテンツが見やすくなります。様々な種類の文書を埋め込む際には同様の手法が便利です。 オフィスでよく使われる文書や表計算でも同じことができそうです。それがStencilaです。 Stencilaの使い方 ドキュメントと表計算が一つのドキュメントにまとめられます。こちらはドキュメント。 こちらは表計算。 埋め込むとこんな感じになります。計算式を埋め込むことができます。 グラフも表計算を使って表現できます。 Microsoft OfficeでもOLEを使って連携はできます。しかし元ファイルを移動してしまったらリンクが切れてしまったりします。更新も複数のアプリケーションを使うのが面倒です。Stencilaは一つのファイルとしてまとまっているので、メンテナンスしやす
Gutenbergでは以前のCSSが反映されない これまでビジュアルエディターでは基本的に、functions.phpに「add_editor_style();」と書いて、テーマフォルダ直下のeditor-style.cssに対して、以下のように書けば .mce-content-body h2{ background-color: red; color: white; padding: 25px 30px; } 以下のように反映されていました。 詳細はこちら。 けれどGutenbergでは、全くスタイルが反映されなくなってしまいました。 これを解決する方法を以下に書いておこうと思います。 GutenbergエディターにCSSを適用させる方法 主な手順はこちら。 functions.phpのソースコードを書く テーマフォルダ直下にeditor-style.cssを作成しスタイルを書く fun
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ハイブリッドアプリやPWAなど、Webアプリケーションをスマートフォンのネイティブアプリ風に使う技術が発展しています。ネイティブアプリと異なり、インストールの手間がなく、プラットフォーマーによる縛りもないのがWebの魅力と言えます。 そんなWeb技術を駆使して作られたのがpage-transitions-travelappです。旅行アプリのデモで、ネイティブ風の画面遷移が魅力となっています。 page-transitions-travelappの使い方 実際の動きについてはこちらのデモを見るのが良いでしょう。表示もまるでネイティブアプリです。 別な画面に遷移したときの動きに注目です。 デスクトップもサポートされています。 デスクトップの場合はサイドバーが表示されます。 デスクトップ
現在WordPressはデフォルトでYouTubeのiframeに対してLazy Loadをするので、もはや以下のカスタマイズをする必要はないかと思います。 YouTube動画が埋め込まれているページは、読み込みが遅いです。 それは、以下のようにiframeが埋め込まれてYouTube動画が読み込まれるからです。 今回は、そのiframeをページ読み込み時は表示しないで、最初はサムネイル画像を表示させておき、クリックした時に初めてiframeを読み込むことで高速化を図る方法の紹介です。 こんな感じに。 カスタマイズの主な手順はこちら。 functions.phpにコードをコピペ style.cssにコードをコピペ 画像をテーマフォルダ直下に配置 基本コピペでカスタマイズできます。 functions.phpにコードをコピペ テーマ(子テーマ)のfunctions.phpに以下のコードを追記
PWAの一要素としてWeb App Manifestがあります。JSONファイルを用意しておくことで、Webアプリをローカルアプリケーションかのように保存できます。この時、アイコンやスプラッシュスクリーンも大事な要素です。 古いブラウザでは対応していないPWAについて、PWACompatが対応させてくれます。 PWACompatの使い方 PWACompatが使われているデモサイトをホーム画面に追加しようとした場合です。ちゃんとアイコンが表示されます。 インストールされました。 起動時に一瞬ですがスプラッシュスクリーンが表示されます。そしてアドレスバーのない状態で開きます。 ローカルのリンクは同じアプリ上で、外部リンクはSafariで開きます。 iOSのSafariでもPWA対応が進められていますが、まだまだ足りない機能が多数あります。PWACompatを使って、なるべくPWAの標準技術だけ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました セキュリティへの意識が高いサイト、例えば銀行などではログイン時にソフトウェアキーボードを提供しています。しかしアルファベットの順番がキーボードと異なるので入力しづらいこともしばしばです。 そこでより本格的なバーチャルキーボードとしてSimple Keyboardを紹介します。日本語入力はできませんが、標準キーボードと変わらず利用できます。 Simple Keyboardの使い方 右側に表示されているのがSimple Keyboardです。あらかじめ用意されているJavaScriptとCSSを読み込むだけで使えます。 ちゃんと文字が入力できます。 Simple Keyboardは大きめのキーボードですが、スタイルシートで調整することもできるでしょう。.comのようなカスタマイズができ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く