2017年5月8日月曜日

プログラムの説明がし辛いので専用ツール作った

プログラミングの説明記事を書く際に、説明を見やすくするためのツールを作成しました。

日々のトラブルを記録したブログ。
プログラムの説明をしておりますが、ページ上では非常に見辛くすごく分かりづらいので改善策を模索しています。
ポク太郎です。
数日更新をサボっておりました。この記事は単なる件数稼ぎです。

プログラミングの説明、解説記事を今後も書いていくつもりでいるのですが、以前から悩んでいたことがあります。
  「説明がすごく見づらくて分かりにくい。
何とかいい方法をと、あるものを作っておりました。


分かりやすいを生み出すのは「見やすい」

“分かりやすい”の必須条件は“見やすい”

「プログラムのコードは見やすくないといけません」と書いているにも関わらず、まず最初にポク太郎の説明が非常に見辛いです。これはいかんと常々思っていました。

色々と試行錯誤していたのですが、
ソースコードの説明に適した表の形式
こんな形の表がええなぁと見つけました。
ですがこの表、複雑ですし、コードを部分的にコピペしたり、行番号写したり、写し間違えてないかチェックしたり…とやってられません。


プログラムを説明するための複雑な表を自動で作り出すアプリケーションソフト

作成したのは「ソースエクスプレイナー」(仮名)

そこで一発ソフトを作ってしまいました。
ソースコード説明ページを簡単に作成するツール
こんなソフトです。

このソフトにソースコードを表示させ、行を選んで説明文を書いていきます。
  行選択説明文書く「説明完了」ボタン
を繰り返すだけで、上で挙げた複雑な表のHTMLコードを吐き出してくれます。

おまけはシンタックハイライト
画面右上のプルダウンメニューに「UWSC.hl」というのが選択されてますが、正体はこんなテキストファイル
好きな言語用の.hlファイルを作成して同ディレクトリの専用フォルダに入れておくと自由自在にシンタックスハイライトが可能になります。

吐き出されたHTMLコードをコピーして、ブログに貼り付け→プレビューすると…、
自動生成されたHTMLでの実際の画像
これならちょっとは見やすくなるかのぅ…。
贅沢を言えば説明文を折りたたみ式に…とかなるけど、とりあえずはこれでいいか。



以前、↓この記事でgoogle-code-prettifySyntaxHighlighterの導入にやたらと苦労してしましたが、
   [Blogger]ブログ上でプログラムを綺麗に表示
さっさと自分で作ればよかったんじゃん…。


また以前の記事全部書き直しです。
「ポク太郎 怒りの文章校正II」始まりまーす。


【関連記事】  ぉぃ、はてなブックマーク!またやりやがったな!
はてなブックマークのカテゴリ判定がおかしい!
Googleアナリティクスのベンチマークが面白い
Googleアナリティクスを使う際に最初に覚えたいこと


スポンサーリンク



↓ ランキングに参加しています!(Ctrlキーを押しながら) ↓

blogramのブログランキング

ポク太郎の「俺の説明聞いてくれ」 
目次
ポク太郎の「俺の説明聞いてくれ」最キラー記事 IT関連
電気回路やプログラムの記事。元々のメインコンテンツ。
UWSC奮闘記
プログラミングのできる子に
デジタルの世界って
映画・ドラマ・芸能
ハリウッドが主のエンターテイメントの記事。最近は似顔絵多し。
戦士の息抜き
落書き漫画
数コマ漫画とアホ漫画。結局最大コンテンツに。
物思いに耽る
今日の数学
アホの雑記
取りとめもなく好き勝手に書く記事。不本意にも一番人気だったり。
役に立つかも
休むに似たり
好き勝手に書く
ブログ運営
AnalyticsやSerchConsolなどの使い方、アクセスアップに関する話題。
アドセンス関連
他のGoogleツール
その他
アホのもくろみ

免責事項 ホームへ戻る

スポンサーリンク





0 件のコメント:

コメントを投稿