生活を良くします - 怠惰なプログラミング

読者です 読者をやめる 読者になる 読者になる

生活を良くします-怠惰なプログラミング

外資系でエンジニアをやっています。便利なサービスや商品、プログラミングで作ったものなどを紹介していきます

続・はてなブログでjavascriptを使い カッテネを少し自動化してみた ~ Pingendoでデザイン

Pingendoとは

Bootstrap4用のエディタ

bootstrapはtwitter社が開発したデザインのテンプレート集のことです。bootstrapがあればデザイン初心者でもそれなりに見栄えが良いものが作れます。

Bootstrapで作られたテーマを無料で公開していたりするので、ダウンロードすればすぐに使えるようになります。このbootstrapをより使いやすく直感的に操作できるように意図されたものがpingendoです。


f:id:what_a_day:20161113145604p:plain
Start Bootstrap - Free Bootstrap Themes and Templates



Pingendoを使ってみた

ダウンロード
このサイトに行けばすぐにダウンロードできます。面倒な会員登録や設定は特にいりません。
pingendo.com


オシャレなデザイン
f:id:what_a_day:20161113152235p:plain


編集中の様子
左に写っている要素をドラッグ&ドロップでエディタ上に要素を反映させることができます。プログラミング知識いらずである程度のwebデザインまでできてしまいます。

webデザインの部品をドラッグ&ドロップするだけでしたので、この画面のものを作るのに5分もかかりませんでした。
f:id:what_a_day:20161113150328p:plain



Pingendoのメリット・デメリット

メリット

  • プログラミング知識がいらずに操作可能
  • ダウンロードから使用までがすぐにできる
  • 簡単なのに見栄えは良い
  • HTMLソースも編集可能なのでweb系の人には便利

デメリット

  • CSSが競合する恐れあり
  • 小回りが利かない

特にcssは、他のはてなブログのテーマを使っているとフォントが崩れたり、ボックスの形が変わったりと大変でした。cssに詳しくないため、該当している部分だけを削除するという危ない対処法を取るしかなかったです。

コンテンツ部分にだけピンポイントで適用できるcssないのかな、とずっと思いながらの作業でした。

続・javascriptでカッテネをちょっと自動化してみた

what-a-day.hatenablog.com


深夜ということもあり、デザイン面がかなり適当になってしまっていました。

今回はより便利にしようとしました。アニメや漫画のまとめを作るときには大量に画像が必要で、さらに著作権の問題からアフィリの画像を使うのが一番問題がないのではと考えています。

変わった部分

  • Bootstrapで多少の見栄えの改善
  • htmlソースに問題がないかその場で表示される
  • amazon,kindle,楽天,koboの中で記入されていない項目は自動的に削除





例えば、このように入力すると楽天とkoboには何も入力されていません。
f:id:what_a_day:20161113153114p:plain



吐き出される結果
ソースコードとともに実際に貼り付けたときにどのように見えるのか確認できます。楽天とkoboのボタンは自動的になくなっています。


f:id:what_a_day:20161113153120p:plain


やはりjavascriptは難しく、何も理解できそうにないですね。
下に入力する用のデモがあります。

稀に「枠線」にチェックを入れると変な挙動になります。自分は常に「枠線」のチェックを外しているので今回は特に何も対策はしていないです。

f:id:what_a_day:20161113154002p:plain



































ここでどういう風に見えるのかがわかります。