okyawaのブックマーク - はてなブックマーク

よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する｜masuidrive
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する Web Componentsを一言で説明すると「HTML/CSSが独立したカスタムタグを作れる仕組み」です。理解するには、まずは素のJavascriptだけでよくある部品を作ってみることが一番だと思います。多くのサンプルではボタンやアイコンなどの部品を作りますが、今回はflexboxを使ったレイアウト定義のコンポーネントを作ってみます。この部分にはちょっとしたハマりどころがあるのでちょうど良い練習になります。もう一つハマりやすいのはフォーム部品ですが、これはまた後日書きます。この記事の前に「今なら使えるWebComponents」を軽くでも読んでおいてもらえると嬉しいです。 2ペインのレイアウトを考える最初にWebアプリでよくある、左にナビゲーション、右にコンテンツを置く2ペイン
okyawa 2022/03/08
CustomElements

WebComponent

JavaScript

css
リンク
今なら使えるWebComponents｜masuidrive
Web Componentsは10年ほど前に提唱されたブラウザのコンポーネント技術の総称です。自分でタグを作ってHTMLを拡張していける技術なのですが、ブラウザの対応や仕様の確定などに時間がかかり、なかなか実用に至りませんでした。私もずっと忘れていたのですが、React/Vueに疲れたなーと考えていたところ、ふと思い出し調べ直してみると、既に安定してProduction readyなのに情報が少なくすごくもったいなかったので、自分で調べつつ色々書き残すことにしてみました。 Web Componentsの誤解名前は聞いたことはあっても使ったことがある人はまだ少ないWeb Components。私も認識違いがありました。 UIコンポーネントを作る仕組みだから自分で作ることはないCSSをページをまたがって使い回すことがあるなら楽になります CSSで!important を書いてたらWebCom
okyawa 2022/03/07
web component

custom emements

lit
リンク
After EffectsでSRTファイルから一番簡単に字幕をつける方法｜masuidrive
After Effectsのエクスプレッション機能を使って、SRTファイルから字幕を入れます。After Effects 2020で動作確認をしています。動画に字幕を入れるのはよくあることですが、決まったやり方もないみたいなので一番簡単と思われる文字ツールに対するエクスプレッションを使った方法を解説します。エクスプレッションを使うメリット - ほぼリアルタイムで反映されるので別のエディタでSRTファイルを書き換えるとそのままプレビューに反映される - プラグインなどを利用せず、一つのテキストレイヤーだけで完結するエクスプレッションを使うデメリット - フォントや出現位置はSRT毎にしか設定出来ないので、複数位置やフォントの場合はSRTファイルを分割する必要がある - 文字数や改行位置など考慮してSRTファイルを生成する必要がある設定方法字幕を表示したいテキストレイヤーの[ソーステキ
okyawa 2021/02/17
動画

AfterEffects

adobe

動画編集

字幕
リンク
アプリ制作で最初から入れておきたい機能｜masuidrive
アプリのメンテナンスや告知などを行う機能はすぐには使わないけど、必ず必要になるので最初から入れておきたいですよね。そのために、。アプリ起動時や復帰時に適当なURLを叩いてJSONを取得して、ダイアログでメッセージを表示する機能を実装しておくといいでしょう。 URLを開くと通常は404が返ってきて、その場合は何も表示しないようにしておきます。このURLはS3など本体のサービスとは違うドメインとサーバにおきます。サーバのメンテナンスや不具合でアクセスできない場合には、このURLに適当なJSONを置くようにします。あとこのファイルの多言語化も忘れずに。 JSONの中にはメッセージ本文と、詳細ページのURL、何度も表示するか一度だけかなどを持っておくといいでしょう。 { "message": { "ja": "20時までメンテナンスです", "en": "We have scheduled
okyawa 2019/02/21
ios

アプリ
リンク
1