blogシタテルの技術やエンジニアの取り組みを紹介するテックブログです。2018facebookこんにちは、シタテルの茨木です。衣服には必ずケアラベル(品質表示ネーム)というものがついています。洗濯の方法などが書いてあるアレですね。凝ったデザインにすることもありますが、大体はパターンが決まっています。今回は、独自のマークアップ言語でケアラベルを作れるようにしてみた、という内容です。完成イメージ中央の入力欄で独自マークアップを入力すると、左にケアラベルがリアルタイムプレビューされる画像としてケアラベルをダウンロードできる右欄でCSSによるデザイン微調整が可能(おまけ)ソースコードhttps://github.com/tibaraki/care-label目次マークアップをパースして配列に配列からDOMを描画CSSを適用マークアップをパースして配列に本件の肝です。パーサコンビネータparsimmonを使用します。パーサコンビネータは文法要素の組み合わせで言語(文書)構造を定義していきます。正規表現も文書構造を定義するものですが、正規表現は再帰が表現できないという限界があります。今回使うようなパーサは再帰を記述できるので、理論上あらゆるプログラミング言語の文法チェックが可能です。今回はこれをつかって、独自マークアップ言語の文法を定義してみます。下記は入力例&出力例&パーサの本体です。parseにマークアップを投げるとパース後の配列を返してくれます。}}文書構造の定義jsの前半部、constの並ぶ箇所は文書構造の定義です。意味としては下記のような感じです。elemとblockが相互参照して再帰しているのがわかるかと思います。lparen.then(elem.many()).skip(rparen)))blockはidで始まり、lparen{とrparen}で囲まれた複数個のelemで構成されるpreservepreserveは前処理です。文書構造の定義でしれっと{}でブロックを定義していましたが、今回作りたいマークアップはインデントでネストを表現する方式なので、前処理でインデントを{}に変換しています。ここもパーサでできればカッコいいのですが、うまいやり方は思いつきませんでした。pythonとかどうしてるんですかね?配列からDOMを描画vueで書きます。パース後の配列(persed)とバインドしておけば、リアルタイムに再描画されて楽です。}}基本的には@hogeをそのままcssのclass(.hoge)として適用し、cssでデザインを定義していく戦略なので、あまり複雑なことはやりません。@marksは画像(洗濯マーク)に差し替える必要があるのと、@mixingsはtableでレイアウトしたかったので、vue内で特別扱いしてあげます。CSSの適用CSSも書き直したらリアルタイムに反映されてほしいので、更新時に動的に差し替えに行きます。},あまりキレイじゃないですが、head要素に無理やり差し込みます。その他HTMLからの画像化は、下記ライブラリを使用しています。https://github.com/tsayen/dom-to-imageどうもフォントまわりの挙動が怪しく、OS/ブラウザによっては画像出力が上手くいかない場合があります。まとめ一通り作ってから、yamlでも良かったのでは、とちょっと思ってしまいました。いえ、非エンジニアにはyamlも辛いでしょうし、目的特化して打鍵の少ない文法を定義したい、というところに独自マークアップの需要はあるかもしれません。WYSIWYGに発展できたりするといいですね。ご参考になれば幸いです。usシタテルのミッションはテクノロジーとイマジネーションで「ひと」と「衣服」の新しい未来をつくること。クラウドシステムを使うように服作りのリソースを誰でも好きなときに好きだだけ使えるプラットフォームを目指しています。元インフラエンジニアの北爪です。Linuxにてプロセスを終了する様々な方法について解説します。最後にプロセスを終了するとはどういうことかを説明します。最初にプロセス終了コマンドと...Vueでwatchが動いてくれないこんにちは、シタテルの藤本です。SCS(Sitateru-Control-System)という生産管理システムのバックエンド(Rails)を担当しています。SCSではRailsでのViewは基本hamlで書かれていますが現在Vueへと移行しようとしています。シタテル株式会社エンジニアのいしづかです。みなさんはコードを書く時、どんなエディタを使ってらっしゃるでしょうか。現在開発が続いているシタテルコントロールシステムのバックエンドはRailsで書かれています。