【予告】過去作の無料公開 &「CSSではじめる同人誌制作」増訂版出します

f:id:spring_raining:20180625150851p:plain

サークルpentapodが頒布した過去作「はじめる React Native」と「チートシートチートシート」について、現在電子版を300円で販売していますが、今度の夏コミのタイミングで無料公開することにしました。この機会にぜひチェックしてください!

以下のフォームからメールアドレスを登録すると、無料公開時にリマインダーを受信できます。

docs.google.com

また、過去作「CSSではじめる同人誌制作」についても、夏コミで増訂版を発刊する予定です。お近くまで寄られる際は、8月12日(コミックマーケット94 3日目)プ-30a までぜひお越しください〜〜

CSS組版に対応したオンラインエディタViolaとviola-savepdfのご紹介

先日,印刷・出版のためのオンラインエディタ「Viola」をリリースしました.

viola.pub

使い方

ViolaはAdobe製エディタBracketsをベースにしたオンラインエディタです1.プレビューワにVivliostyle.jsを組み込むことで,最新のCSS組版技術を使ったレイアウトが実現できます.

f:id:spring_raining:20180111173214p:plain

右側領域はプレビューになっており,上部のスイッチでモバイルプレビュー,デスクトッププレビュー,印刷プレビューに切り替えることができます.印刷プレビューは反映に若干タイムラグが生じるので,執筆時はデスクトッププレビューがおすすめです.

f:id:spring_raining:20180113161744p:plain:w300

HTMLを直接書くのは正直だるい作業ですが,Violaに備わるMarkdownトランスパイラがある程度この作業を緩和してくれます.Markdownファイルを作成すると,自動でHTMLファイルが作成され,Markdownファイルの内容が反映されます.基本的なMarkdown記法はカバーされていますが,脚注など微妙に未対応の機能があり,今後修正したい箇所です.

f:id:spring_raining:20180113170233p:plain

Violaで作成したデータはIndexedDBを使ってブラウザが確保する領域に保存されます.このデータは,能動的に消さない限りブラウザを閉じてもそのままですが,シークレットモードでアクセスした場合,タブを閉じるとデータが消えてしまうので注意してください.また,アプリケーションのアセットファイルはService Workerでまるっとキャッシュされているので,キャッシュが残る限りオフラインでの執筆が可能です.将来的には,作成したデータはオンライン時に同期させるようにする予定です.

f:id:spring_raining:20180113161054p:plain

ところで,Violaはオンラインエディタという形式を取っていますが,実際にはVEDAのように各種エディタのプラグインという形で開発する方法も考えられます.

これは想定する利用環境の違いが理由で,Violaは執筆に慣れた人よりもむしろ,まだ使い慣れたエディタをインストールしていない初心者を対象にしているためです.このような方でもすぐに執筆を始めるためには,オンラインエディタのほうが適しています.執筆が初めての人……そう! それはこの記事を見ているあなた! 今すぐ技術書典あたりに応募して書き始めましょう!

techbookfest.org

さらに,複数人による共著の際にも簡単に同じ環境を用意できるメリットもあります.「○○というエディタをインストールしてプラグインを入れて」よりも「viola.pubにアクセスして」と頼むほうがずっと簡単です.

viola-savepdf

とはいえ,使い慣れたエディタやワークフローを既に構築しているかもしれません.そんな時はViolaのpdf出力をコマンドラインで実行するviola-savepdfを試してみてください.

npmでviola-savepdfをインストールします.

npm install -g viola-savepdf

viola-savepdfの使い方は超簡単.ChromeChrome Canary)をインストールした状態でsavepdfコマンドを実行すると,Headless Chromeを介してhtmlページをPDF形式で保存します.

savepdf -s JIS-B5 -o output.pdf target.html

--previewオプションで出力プレビューも確認できます.

f:id:spring_raining:20180111180018p:plain

Violaとviola-savepdf,どちらもぜひぜひご利用ください.

今後の実装予定

  • スタイルテンプレートの用意
  • 数式表示機能(MathJax?)
  • Markdownによる執筆機能の強化
    • 表記ルールを拡張して,ルビや参照などに対応できると良さそう
  • ePub出力機能
    • 実は仕様よく知らない…

上記の機能はあくまでも予定ということで……


  1. 正確には,BracketsMozillaがフォークした「Bramble」をベースにしています.Mozilla自身も,Brambleを使ったオンラインエディタThimbleを公開しています.

ドワンゴ サマーインターンに参加しました

だいぶ前の話ですが,9月4日〜29日までの間ドワンゴのサマーインターンに参加していました.ので,感想です.

f:id:spring_raining:20171029224828j:plain

おもいで

ドワンゴのオフィスは東銀座のでっかいビルにあります.1階が歌舞伎座になっててすごい.

有名な話ですが,ドワンゴではSlackをとてもとても活用しています1.ン千個あるPublic channelsではハッキングから今日のおかずまで雑談,もとい業務連絡が飛び交っています.業務時間中なのに反応速度が爆速ですごい

また,社内の一部エンジニアの中では1.2kgのチャーハンを平らげるしきたりがあります.これは500g.

f:id:spring_raining:20171029224852j:plain

社内ではボードゲーム部をはじめ各種部活動がさかんです.これは縁あり料理研究部の活動にお邪魔したときの様子.このあと滅茶苦茶鯖を焼いた.

f:id:spring_raining:20171029224923j:plain

そしてこれが新機能リリース祝いの寿司.

f:id:spring_raining:20171029224949j:plain

以上の通り,インターン中の写真は飯しかありませんでした.なんかこうもっとキラキラした写真は無かったのか.

やったこと

サマーインターンでは他のインターン生とチームを組み,friends.nicoというSNSサービス(Mastodonインスタンス)の新機能を企画・開発しました.ここでいう「企画」は,既に用意された案から選んで実装してみましたというのではなく,文字通りアイディアを出すところからやります.多分実務の1/3くらいは新機能を考えていた時間だと思います.

そして最終的に用意した機能は「ユーザープロフィール絵文字機能」.以下の記事で詳しく紹介されています.色々なトラブルはありましたが,何とか期間中に開発した機能をリリースすることができました.

ch.nicovideo.jp

思い返せば,私にとってWebサービスの開発への興味はどのように作ったかということで,なにを作ったかということに対しての興味はそれ程強くありませんでした.今回のドワンゴでのインターンは,何を作ればユーザーが喜んでくれるのか,どうすれば気持ちよく利用してもらえるか,ということに本気で考えさせられるという点で,これまでに無い経験になりました.たまたまMastodonという題材があったというタイミング的な面もありますが,SNSという下手をすれば一発で崩壊するセンシティブな題材で,一介の学生にここまで自由にさせてもらえる場所はなかなか無いと思います.

インターンを終えて,個人でWebサービスを開発する意欲がまた湧いてきました.Mastodonみたいな一大ムーブメントでなくても,使った人が笑えるような,ユーザー同士が交流し合えるような,良いものを作っていきたいですね.

メンターの方には本当にお世話になりました.ありがとうございます.

あわせて読みたい

随時追加的なアレです.

medium.com

kurome-stdio.hatenablog.com

ISUCON7予選通過 & 技術書典3出展

ISUCON7

f:id:spring_raining:20171024014457p:plain

ISUCON7に私と@susisu2413@amaya382の3人で参加しました.学生枠ですが,チーム名「チーム名を考えるのが苦手すぎる」として最終スコア89047で本戦に出場できることができました!ヤッター

isucon.net

私はアプリケーション(Node.js)担当でしたが,RDBの知見が何も無いのが分かっていたので,最初からインデックス追加やクエリの改善を諦めてMySQLからガバッとRedisに移し替える作戦で高速化を目指しました.実装間に合って良かった…

実装中は@susisu2413がESLintを導入したおかげでコードが衛生的になり,実装中にいくつかバグを見つけることができて良い体験でした.デプロイ周辺も@amaya382に任せきりになり頭が上がらない思いです🙇

susisu.hatenablog.com

amaya382.hatenablog.jp

感想

  • 役割分担が適切だった

    • 前回はアプリの改修を1人に任せており,1人がひたすら実装するのを2人が見守るみたいな状態になってて良くなかった.やはりアプリ2人ミドルウェア1人の構成が最適そう
  • 事前にpixiv社内ISUCONをやってたらそっくりの問題が出題された

    • 画像ファイルがDBにそのまま入ってるとことか
    • @amaya382にシュッと初期DBから画像を取り出してもらい,@susisu2413がササッと画像アップロード部分の実装をしてくれました🙏
  • 3人が同じ場所に集まるの大事

    • ペアプロで確認しつつ実装できた
    • 予選開始時間延長で期せずしてアニメ鑑賞会になった.このはな綺譚は最高
  • Redisのノンブロッキングな動作に悩まされた(本質と全然関係ない)

    • RedisにはAUTOINCREMENTが無いためHLENで要素数を見る→idに要素数+1を設定するという実装にすると,同時に要素を追加されたときにidが重複することがあることが分かり,結局乱数をidに設定する雑な解決策になった
  • マニュアルを誰一人精読してなくて,実行環境は1台のサーバで完結しており残りの2台は予備だと勘違いしてた

    • 本戦問題何もやって無くて複数台構成という発想が無かった
    • アホス
    • マニュアルはちゃんと読もう!!!!!!
  • Cache-Controlを設定するとベンチマーカがちゃんと考慮してくれることとか,静的コンテンツは304を返しても良いことに気づかなかった

    • マニュアルは(ry
    • この辺りはとにかく勉強不足だった
  • sleep(1)に手をつけてなかった

    • GET /fetchがポーリングされていることには気づきつつも,1秒よりも延ばすとタイムアウトでスコアが減ってしまうと思い込みそのまま放置してた
    • というか今見たらマニュアルにちゃんとヒント書いてたね…
  • 何も考えずにMySQLをRedisに置き換えたけど,果たして効果はあったのか??どこがボトルネックになっているか確認して,ちゃんとDBが原因であることを確認してから取りかかるべきだった

    • しかしDBは別サーバで動いていたので確認しようがない…
  • アプリとNginxをUNIXドメインソケットで繋ぐ等基本的な高速化手段を忘れていた

    • やるべきことをリストアップすると良さそう

一般枠のスコアを見ると何もかも戦うステージが違う感じで尻込みしますが,何とか本戦でも爪跡を残せるよう頑張りたいと思います.

マニュアルはちゃんと読もう!!!!!!

技術書典3

f:id:spring_raining:20171024014835j:plain

あと全然関係ないですが,ISUCON予選2日目に開催された技術書典3で「やっていく合同誌」という合同誌を頒布していました.私はdeeplearn.jsについて記事を書いています.

deeplearnjs.org

ISUCONに参加して技術書典に行けなかった皆様に朗報です!!!「やっていく合同誌」は電子版で販売しております!!! COMIC ZINにも委託しているので物理本も買えます!!!ご興味ある方は是非!!!

booth.pm

夏コミで「CSSではじめる同人誌制作」という本を頒布します

こんにちは(←こんにちは以外の挨拶パターン増やしたい).今度の夏コミの新刊として,こういう同人誌を作りました.

pentapod.github.io

今回は「CSS組版を始める」「レイアウトを作る」「原稿を出力する」の3部作の構成になっています. 同人誌の作り始めから完成まで1章,2章,3章と読んでいく形です. これまでの同人誌制作で使ってきた(参考: 1, 2)VivliostyleによるCSS組版について,(筆者含む)実践形式で紹介する本となっています.

あと,タイトルが「CSSではじめる同人誌制作」で初心者歓迎みたいな雰囲気になっちゃっていますが, 初歩的な説明は省いてしまったので,全くのCSS初心者やWebページ制作初心者だと少し難しいかもしれません… その分組版に必要な内容は網羅できたと思うので,同人誌制作(もちろんそれ以外にも)の際は活用してください.

また,本書では全編ChromeとVivliostyleを中心とした無料のソフトウェアで制作することを目標にしていましたが, やむを得ず最後の仕上げでAcrobat Proを使う箇所が生じてしまいました. このあたりは,今後の課題としたいところです.

f:id:spring_raining:20170806154534p:plain

サークルpentapodは,1日目 東た-12aでお待ちしています. ただ,今回新刊はそこそこいっぱいあると思うので,焦らず来てくださいね. 夏は暑いし並んでると隣の人の腕とぺったりくっついたりして疲弊するので,昼頃来るのが吉です. 余った分は10月22日の技術書典3にも持って行きます. 電子版も頒布予定なのでそちらもどうぞ.