CSSアニメーションでパタパタ（反転フラップ式案内表示機）を作ってみた - Qiita
かつて、鉄道や飛行機の案内板として活躍したパタパタ、あるいはソラリ―こと反転フラップ式案内掲示板をイメージをCSSアニメーションとJSで作ってみた。 なお、私が公開しているお気に入りの場所をマッピングした地図を公開するサービスToboggar でパタパタ型のUIを採用した。 サンプル Toboggar - 名古屋で食べるべきハンバーガー Top 10 ここで使用したソースを簡素化したものが今回の記事である。 完成形 まずは、出来上がりを Codepen で確認。(画面が表示されていないときは、Result をクリック) 左下の Start ボタンを押すとフラップが回る。 また、Slow ボタンでゆっくり回るので、動きをじっくり確認できる。 See the Pen Split-flap display animation by hiroatsu (@scqspcfg-the-solid) o
【VSML/VSS】動画を編集できる言語を作った話 - Qiita
はじめに みなさんは動画編集をやったことはありますか？ 私は，頻度は低いものの動画編集をして動画投稿サイトに動画をアップロードした経験があります． 動画編集とは元来めんどくさく手間がかかるものではあるのですが，普段からWebアプリの開発をしている私は，以下のようなことを考えていました． HTML/CSSのように複数オブジェクトを一つのコンポーネントのように扱えたら，CSSのように統括して装飾を指定できたら，HTMLのレンダラー(ブラウザ)が相対値から計算して幅や高さを指定するように，動画のオブジェクトの時間長も編集アプリが計算して指定してくれたら，もっと楽に動画編集できるのになぁ，と． そこで私は，HTML/CSSをベースとした，動画の構成を記述する言語を記述することで動画編集を行えるという技術を開発しました． 元々OSSでやるか，未踏のようなイベントに持ち込むか悩んでいたのですが，大学4
Vivliostyleに特化したMarkdown - VFMの使い方 | gihyo.jp
本記事ではVivliostyle用のMarkdownとして開発されている、VFM（Vivliostyle Flavored Markdown）について解説します。 MarkdownとGFM、VFMの関係 構造化された文書を記述するためのマークアップ言語としてHTML/XMLがあります。これらは優れた表現力を持つ反面、記法として手動で書くには煩雑です。この課題を解決するための簡潔なマークアップ言語として、Markdownが登場しました。 以下はHTMLとMarkdownで同じ文書を記述した比較例です。 HTML <h1>Title</h1> <p>The quick brown fox jumps over the lazy dog.</p> Markdown # Title The quick brown fox jumps over the lazy dog. MarkdownはHTM
CSSフレームワークVivliostyle Themeで簡単にページデザインを編集する | gihyo.jp
CSSにまだ詳しくなかったり、ページデザインよりも本文の執筆に注力したい人のために、Vivliostyleでは簡単にデザインを適用できる「Vivliostyle Theme」が用意されています。第3回では、Vivliostyle Themeの使い方や、Vivliostyle Themeを実現するためのCSSの機能、自分でVivliostyle Themeを作って公開する方法について紹介します。 Vivliostyle Themeについて Vivliostyle Themeは、Vivliostyleワークフロー上で簡単にページデザインを適用するための仕組みです。CSS組版を実現するVivliostyleは、ページデザインをCSSで実現できることが最大のメリットですが、逆説的に言うとCSSを知らないとデザインの変更ができないとも言えます。CSS自体は広く普及しており、CSSを学ぶ環境も十分に整
Vivliostyle Viewer で CSS 組版ちょっと入門
Vivliostyle は、CSS 組版で本を作るためのツールとして、少しずつ知られるようになってきたかと思います。そして、最近の更新では、目次ナビゲーション機能、Web Publications 対応など、Web／電子出版ビューアとしても、使い勝手のよいものを目指しています。この「Vivliostyle Viewer で CSS 組版ちょっと入門」では、Vivliostyle Viewer でできることを中心にした CSS 組版のちょっとだけ入門を書いてみます。 Vivliostyle Viewer の紹介 Vivliostyle Viewerhttps://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html は、ブラウザ上で動作する CSS 組版エンジン vivliostyle.js とビューア UI
【slick】縦に流れるニュースティッカーを作る方法（WordPressの実装方法も解説）
ニュースティッカーって何？と思うかも知れませんが、新着情報を1件ずつ切り替えて表示する物です。 ちょっと言葉では分かりにくいかも知れませんが、見れば分かると思いますｗ slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
Re:VIEW - Digital Publishing System for Books and eBooks
Re:VIEWではじめる(e)Book制作 Re:VIEWは電子書籍と紙書籍のための、簡潔かつ強力なデジタル出版ツールです。コンピュータ書等の技術書籍（紙・電子）の商業出版や同人出版に利用されています。 使い方 $ gem install review $ review-init my-awesome-book $ cd my-awesome-book $ (... ファイルの修正 ...) $ rake epub ## EPUBを生成 $ rake pdf ## PDFを生成(LaTeX利用) サポートしているフォーマット Re:VIEWは執筆用記法（入力フォーマット）としては独自のフォーマット（「Re:VIEWフォーマット」）を使用しています。 閲覧用フォーマット（出力フォーマット）としては以下のようなフォーマットを利用できます。 EPUB PDF (LaTeX) InDesign (
Markdownで技術同人誌のPDFが生成できるOSSを公開しました - Qiita
こんにちは、以前 FlightBooksというサービスを立ち上げていたのですが、2年ほどメンテしていなかったため、ローカル動作するOSS版として公開することにしました。 OSS版を作るにあたり、エディタ部分はVSCodeなりお好きなエディタを使ってもらうとして、 MarkdownからHTMLを生成する部分 HTMLからPDFを生成する部分 を切り出して公開しました。 ほかのサービスや技術と何が違うの？ 技術書をマークアップテキストで書くプラットフォームとしては、Re:VIEW、Vivliostyleなどがありますが、FlightBooksは「出版やDTPに関する知識がなくても印刷所にだしたい」というエンジニア諸氏のために開発されました。 「商業印刷」にどこまで向き合うか ご家庭のプリンタに印刷を指示すると、ファイルの情報がプリンタドライバに送信され、そこでインクの出し方を制御するためのデー
コード開発と同じようにしてドキュメントが作成できるJetBrains製「Writerside」を使ってみた
開発者向けのツールを展開する企業「JetBrains」がドキュメント作成のためのツール「Writerside」を早期アクセスで公開しました。早期アクセスの期間中はWritersideを無料で利用できるとのことなので、実際に使って試してみました。 Writerside - JetBrains が提供する新しい技術文書作成環境。 https://www.jetbrains.com/ja-jp/writerside/ Writersideの公式ページを開き、「ダウンロード」をクリックします。 今回はスタンドアロンツールとして利用するので、「ダウンロード」をクリックします。JetBrains IDEを利用している人はプラグイン形式で導入することも可能とのこと。 インストーラーがダウンロードされるのでダブルクリックして起動します。 「Next」をクリック。 インストールには空き容量が1.0GB必要で
Vue.js - The Progressive JavaScript Framework | Vue.js
The Progressive JavaScript Framework Web ユーザーインターフェース構築のための、親しみやすく、パフォーマンスと汎用性の高いフレームワーク。 Vue を使う理由 はじめる インストール 親しみやすい 直感的な API とワールドクラスのドキュメントを使用して、標準的な HTML、CSS、JavaScript をもとに構築します。
「Cloudflare Pages」が正式版に。JAMスタックによる高速なWebサイトを構築、CDNに展開へ
Cloudflareは、JAMスタックを用いてWebサイトを構築する新サービス「Cloudflare Pages」が正式版として提供開始されたことを発表しました。 JAMスタックによるWebサイトの構築とは JAMスタックとは、JavaScript、API、Markup Language（HTML）を主な構成要素としてWebサイトを構築する手法を指します。 WordPressに代表される多くのCMSでは、ユーザーからのリクエストに反応して動的にHTMLが生成されることで、動的なWebサイトを実現しています。この場合、HTMLの生成に一定の時間がかかるため高速なWebサイトの構築が容易ではないこと、サーバへの負荷によりスケーラブルなWebサイトの構築も容易でないことなどが課題です。 JAMスタックでは、HTMLの生成はWebサイトの生成時に行うことで、基本的には静的なWebサイトと同様の高速
わたしはページ内検索を普通に使いたい
以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-overflow: ellipsisまたは-webkit-line-clampによってテキストが省略された場合、その省略部分がページ内検索にヒットすると非常に探しづらいです。 特に、グリッドで区切られたアイテムが複数列・複数行で並んでいる際に顕著です。 以前の記事のとおり、わたしはYouTubeでよく遭遇します。 下記のデモは、1000個のアイテムを並べたものです。 このうち、「Red Rose」というワードは12個のアイテムに含まれています。 デモを開いて「Red Rose」で
心拍数を配信画面に載せる方法！！
海外ストリーマーの間では少し前から流行っていたらしいのですが、 日本ではまだあまり情報が無いようなので、記事にまとめさせて頂きました。 目次 TL;DR(要約)完成イメージ必要なものハードウェアの準備セットアップソフトの起動フロント側の動作テスト配信ソフトに追加するおしまいTL;DR(要約) ANT+対応ガジェットを使い心拍数をNode.jsに送信。 Node.jsからHTMLで作ったフロントへSocket.ioで送信。 OBSでHTMLを読み込んで画面に映す。 完成イメージ イメージはあくまでも例で、ここで紹介する方法は、 心拍数を(アプリのキャプチャ等ではなく)数字として取得し、JavaScriptに渡す事が目的となります。 必要なもの ANT+に対応した心拍計(約8000円) ANT+に対応したドングル(約3000円) Windows PC(Macでも動くらしいが未検証) Node.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vivliostyle — 楽しく CSS 組版！
GitHub - kmuto/review: Re:VIEW is flexible document format/conversion system
GitHub - ku-suke/flightbooks
GitHub - misskey-dev/misskey-hub: Website for Misskey
GitHub - vuepress/core: Vue-Powered Static Site Generator
Home
GitHub - css-modules/css-modules: Documentation about css-modules
