2021年3月第2週レポート

花粉症のせいで体調が芳しくない一週間でした…。

インプット

📝 CSS Position

Forge Viewerの調査をしようとしてデモアプリを作っているのですが、Flexboxを使って左側にメニュー、右側にViewer、というレイアウトを作ってみたところ、ViewerのWidthは100%が指定されているのに、Viewerのwidthが親要素のwidthではなくウィンドウのwidthになってしまい意図しないレイアウトになってしまい悩みました。

DevToolsで確認してみたところViewerのdiv要素にposition: absoluteが指定されていたので、そういやCSSのPositionプロパティって何度も調べているわりには理解があやふやかも、と思ったのでメモとして残しました。


positionプロパティはボックスの配置位置をコントロールするもので、相対位置指定か絶対位置指定か(もしくは位置指定をさせない)を指定する

position: static - CSSによる位置指定をさせない - top、bottom、left、rightは適用されない

position: relative - 相対位置指定 - staticで指定した場合に表示される位置を基準として、top、bottom、left、rightを使って位置を指定する

position: absoulte - 絶対位置指定 - 祖先のボックスのpositionプロパティにstatic以外が指定されている場合は、その要素を基準位置とする - その指定がない場合はウィンドウ左上を基準位置とする

position: fixed - 絶対位置指定 - ウィンドウの左上を基準位置とする - スクロールしても位置が変化しない


Viewerの祖先要素にpositionプロパティが指定された要素がなかったため、Viewerの基準がウィンドウになったので、widthがウィンドウのものを利用することになった、ということでした。Viewerを保持する要素にposition: relativeを指定することによってレイアウトの問題を解決できました。

📝 Vueでコンポーネントの再帰呼び出し

先週のレポートでVueでツリービューのコンポーネントを作っていたのですが、それをビルドしてその他のプロジェクトに導入してみたところ、第一階層しか表示されませんでした。Devtoolsで確認したところ、再帰でコンポーネントを呼び出しているところでHTMLが展開されていない、ということがわかりました。

こちらにある通り、再帰的にコンポーネントを呼び出す時にはnameプロパティを指定する必要があります。

vue-property-decoratorを使ってクラス形式でコンポーネントを定義しているのですが、クラス名をつけておけばそれがnameプロパティになると思い込んでいたのですが、それが間違いで@Componentデコレータで明示的に指定する必要がありました。

@Component({  
    components: {  
        TreeNode  
    },  
 name: 'Tree'  // ここ
})  
export default class Tree extends Vue {

これで無事再帰的にコンポーネントを呼び出すことができました。

📝 TypeScriptで読み取り専用配列型

TypeScriptだとインスタンスプロパティの定義時にreadonlyキーワードをつけておくと、そのプロパティは変更不可となります。値型の場合は値を変更することができなくなるのですが、オブジェクトや配列などの参照型はオブジェクトのプロパティが変更不可になるわけではなく、その参照先が変更不可となります。

じゃあオブジェクトのプロパティを変更不可にしたい場合はどうすればいいか、というとUtilityTypeとしてReadonly<T>があります。これを使えばオブジェクトのプロパティは変更不可となります。

じゃあ残るは配列なんですが、配列の場合はReadonlyArray<T>、もしくはreaonly T[]を使うことによって配列の要素が変更となります。すなわち、pushpopといったメソッドも使用できなくなります。もちろんインデックスアクセスもできません。

// 全部ダメ
const array: readonly number[] = [1,2,3,4]  
  
array.push(5)  
array.pop()  
array[0] = 5

アウトプット

🛠️ Forge ViewerをVueで動かしている

先週のレポートでもちらっと書いていますが、Forge Viewerを使ったVueプロジェクトを作っています。サンプルがほとんどjQueryベースなのでちと流用するには厳しいということで色々作っています。その第一歩がツリービューなのですが、そちらが大体まともに動くようになったので、Forge Viewer本体を導入しはじめました。

Forge Viewer自体もわりとコールバック中心のデザインになっているので、Promiseでラップしたいなと思ったり、前提知識を必要とするわりにはドキュメントがわりとあっさりしているなと感じたりしています。

いろいろデモは作っているのですが、表示データが公開できないものであったりするのでなかなかお披露目できないがちょっと悩みのタネですね。

Profile
d_yama
元Microsoft MVP for Windows Development(2018-2020)
Sub-category : Windows Mixed Reality
Search