TypeScriptの練習に、QiitaのAPIを叩いていて記事を表示するブログウィジェットを作成しました。 プロジェクトページへリダイクレトします。 See the Pen QiitaWidgetJS by y_hokkey (@hokkey) on CodePen.
ブラウザで強制されてしまう約物アキの挙動を、よりDTPソフトに近い挙動へ改善するjQueryプラグイン。 約物アキ量とは、日本語の括弧や句読点のあとに入る余白を指す。ブラウザではこの約物アキ量が常に半角で固定されてしまうが、そうすると約物が連続したときに余白が空きすぎてしまう問題がある。 DTPの世界では、こういった広すぎるアキは詰めるのが普通だ。そのため、Webと書籍の組版を見比べると、たとえフォントが同じでもWebの方がスカスカしたダサい組版になってしまう。 現状は最新のブラウザにしか対応していないものの、font-feature-settingsという新しいCSSプロパティで、この約物のアキをとることができるようになった。しかし、全部の約物へ一律にこれを適用すると、本来必要な箇所のアキまでなくなってしまう。 こういった訳で、約物の前後関係を計算し、必要なところにだけfont-feature-settingsを適用できるスクリプトを作ることにした。 仕組み Blast.jsで文字を1文字づつspan要素に分解する 1文字づつ文字列を調べ、辞書にある文字クラスと一致していたら特別な約物クラスを付与する 前後にほかの約物クラスがある約物クラスには、その前後関係を約物の前後関係クラスとして付与する 1文字づつY座標を調べ、行頭文字と行末文字を検出し、特別な行頭・行末クラスを付与する 約物クラス、約物の前後関係クラス、行頭・行末クラスへ、CSS側でfont-feature-settings: "halt" 1;が特定のコンテキストのときにだけ適用されるようにする。これにより、「閉じ括弧の直後にある開き括弧」や、「読点の直後の閉じ括弧」といった条件をでアキ量を減らせる CSSの影響により、行頭だった文字が前の行に追い込まれてしまう場合がある。このときはさらに追い出しクラスを付与し、強制的に次の行へ追いこまれた文字を押し返す そうすると1文字分近いアキが行末に残ってしまうので、そのアキをその行に含まれる文字の字間で均等に吸収する DOMを大量に生成したり、インラインCSSの記述をゴリゴリやっているため、パフォーマンスはあまりよくなさそう……。 実装の詳細はライブデモも参照。 参考サイト 今回はじめてjQueryプラグインを自作してnpmに公開してみた。やってみるとどちらも意外と簡単だった。なお、最近のjQueryプラグインはcommonJS対応していないとwebpackなどからrequireできない。せっかくなのでrequireできる仕様にした方が良いだろう。(ただし、依存しているblast.jsはcommonJS未対応……。) jQueryプラグインのCommonJSモジュール化からnpmに公開するまでの方法 | maesblog 初めてのnpm パッケージ公開 - Qiita また、npmのバージョン番号ルールとして採用されているセマンティック・バージョニングというものも始めて知った。一度公開すると二度とバージョン番号を下げてはいけない、ブレーキングチェンジがある場合はバグフィックス扱いでバージョンを上げてはいけないなど、ちゃんとしたルールがあるので読んでおきたい。 セマンティック バージョニング 2.0.0 - Semantic Versioning ダウンロード NPM: jquery.yakumono GitHub: hokkey/jquery.yakumono: 日本語組版で役物のアキ量を調整するためのjQueryプラグイン ライセンス ソフトウェアのソースコードはMIT Licenseです 当サイト上の作品の紹介文・動画・画像はCC-BY-NC 4.0ライセンスです License This software is released under the MIT License. Descriptions and images about the work on this site are licensed under a Attribution-NonCommercial 4.0 International. 初出 2017年2月12日
づや会 vol4 ~Node.jsの話~の登壇資料です。 以前コマンドラインで作成したPDFの差分比較ツールを、Electronを使ってGUIアプリにしてみました。 づや会Vol.4のレポート記事(LIGブログ): 今話題のBotをNode.jsで作れる？！LIGエンジニアで勉強会してみた！ | のびすけのイベントレポート コマンドライン版Qiita記事: GulpとGraphicsMagickでPDFを差分比較する。マルチページ・マルチファイル対応 - Qiita コマンドライン版ソースコード: hokkey/image-compare: image-comparing task with gulp and graphicsmagick スライド スライド(一部)
社内勉強会資料。制作系のフロントエンド技術者向けに、ソフトウェアテストについて概要をまとめたスライドです。 本資料に関連し、『Pairwiser』について更に掘り下げた記事『Webアプリのテスト工数を削減できるかもしれないペアワイズ法とPairwiser』もQiitaに公開しています。 スライド 参考資料 知識ゼロから学ぶソフトウェアテスト 【改訂版】 第1回 組み合わせテストの技法：組み合わせテストをオールペア法でスピーディに！｜gihyo.jp … 技術評論社 現場で使うためのオールペア法、直交表の基本（2）：組み合わせテストを科学的に効率化する――手法とツール、品質保証のための道具 (1⁄3) - ＠IT Pairwiseテスト導入の効果と課題 Pairwiseは大規模パッケージソフトウェアで効果的に運用できるか 直行表とオールペア法の並行運用によるソフトウェアテスト 手法と強さ、印紙、水準の選択ガイドライン Pairwiser - Pairwise Testing and Test Generation Tool PictMaster プロジェクト日本語トップページ - OSDN スライド(一部)
普段から愛用していて、あらゆる作業効率を地味にアップさせてくるリンク共有用のブックマークレットを紹介します。 Wiki・チャット・チケット・資料の作成が捗ります! ちなみに、ブックマークレットとはブラウザのブックマークに登録して使う、ちょっとしたJavaScriptコードのことです。 参考: 知ってそうで知らないブックマークレットの仕組みと使い方（と便利な11点まとめ） ｜ ライフハッカー［日本版］ Markdown形式 Bitbucket・GitHub・Qiita・Slack等、最も色々なシーンで使う形式です。 コード javascript:prompt('Markdown','%5B'+document.title+'%5D%28'+location.href+'%29')() 出力サンプル: [タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE](http://media-massage.net/blog/linkbookmarklet/) ブックマークレット: Title+URL: Markdown ChatWork形式 国内で人気の高いChatWorkへURLリンクを綺麗に貼れるブックマークレットです。選択中のテキストも引用されます。 ChatWorkの記法は独特ですぐ忘れてしまうので、ブックマークレット化すると楽です。ChatWorkに投稿すると下図のような表示になります。 コード javascript:prompt('ChatWork','[info][title]'+document.title.replace(/([\[\]])/g,'\\$1')+'[/title]'+location.href+'\n'+window.getSelection()+'[/info]')(); 出力サンプル: [info][title]タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE[/title]http://media-massage.net/blog/linkbookmarklet/ [/info] ブックマークレット Title+URL: ChatWork Textile形式 Redmineを中心に、Bitbucketの一部やGitHubでも使うことができます。Markdownに比べるとマイナーですが、筆者はTextileの方が好きです。 コード javascript:prompt('Textile','%22'+document.title.replace(/&#34;/g, '')+'%22%3A'+location.href)() 出力サンプル: "タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE":http://media-massage.net/blog/linkbookmarklet/ ブックマークレット: Title+URL: Textile HTMLリンク形式(タイトル) <a>タグでマークアップ済のテキストデータを出力します。 コード javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%3E'+document.title+'%3C%2Fa%3E')(); 出力サンプル: <a href="http://media-massage.net/blog/linkbookmarklet/">タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE</a> ブックマークレット Title+URL: HTML HTMLリンク形式(URL) <a>タグでマークアップ済のテキストデータを出力します。タイトルではなくURLをそのまま使用し、title属性にページタイトルをセットします。 コード javascript:prompt('HTML link','%3Ca%20href%3D%22'+location.href+'%22%20title%3D%22'+document.title+'%22%20%3E'+location.href+'%3C%2Fa%3E')(); 出力サンプル: <a href="http://media-massage.net/blog/linkbookmarklet/" title="タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE">http://media-massage.net/blog/linkbookmarklet/</a> ブックマークレット Title+URL: HTML(URL) プレーンテキスト形式 FacebookやTwitterの本文にしたり、紙の資料に使ったりと、何にでも使えるプレーンテキストのフォーマットです。 コード javascript:prompt('Plain text',document.title+'%5Cn'+location.href+'%5Cn')(); 出力サンプル: タイトルとURLを色々なフォーマットでコピーできるブックマークレット | デザインとWeb開発とその他諸々。 MEDIA-MASSAGE http://media-massage.net/blog/linkbookmarklet/ ブックマークレット Title+URL: Plain
