Cyber Stage

Diary

コミックビューアが新しくなりました

突然ですが、自サイト内のコミック閲覧ページが新しくなりました!
サイト内のリンクは一通り差し替え済みです。

どう新しくなったのかというと…

スマホ表示に完全対応しました(横フリックでページめくり)
・PCから見た際には見開きで表示できます(キーボードの矢印←→でも移動可能)
・特定のページを指定してジャンプできます
・全話の冒頭に同人誌版の表紙絵を追加しました
・各話のラストページから次の話(章)へ飛べます
・最新話のラストページからは感想フォームへ飛べます
・更新も楽です

最後のは完全に自分得なんですが、スライドを流用してビューアを作ると、ページ数分だけ <li> タグを用意するのがめんどいだろうなあとずっと懸念していたんですよね。
はじめにたくさん行を用意しておいてコメントアウトするのは、なんかスマートじゃないし…と思ってたら、連番の画像をホイッとフォルダに突っ込んで、最大ページ数を指定すればOKだったので助かっています。

ビューアサンプル

PCから見た時の見開き表示は、Pixivからも消えてしまったのでとても嬉しい…!
近年、各種投稿サービスが強制縦スクロールになってしまったので、強引に擬音の位置を変えたりコマを切りはりしたりして対応していたんですが、やはり見開きで読める環境からは見開きで読んでいただきたいので。
スマホから見た時も、横めくりでページが流れていくのでそこまで見開きが不自然なことにはならないのではないかな?と思います。


こちらの素敵なビューアですが、「赤錆びている」のたしなみがいさん作のものを使わせていただきました。
(※ データのフリー配布などはされていないので、ご注意ください)

最初は自分でswiperを改造して作ろうとしていたんですが、いい感じにカスタマイズするまでの道のりが遠すぎてめげかけていたのでとても助かりました。やはり餅は餅屋ということですね。
本当にありがとうございました!!!

そうなんです…自分でも横スクロールビューア作れるかな?って思って途中までやっていたんですが、ご覧の有様(下記参照)で。
もはやおもしろい域なので、使用前使用後を見比べてみてください。
使用前http://cyberstage.cocoon.jp/test/
使用後http://cyberstage.cocoon.jp/viewer/comic3-1/


これまで漫画閲覧ページをスマホ対応していなかったのでモバイル環境から見た時にはマンガハックさんへ飛ぶようにしていたんですが、サイト内でぜんぶ読めるようになったのでリンクも修正しました。
(なお、スマホからサイトを見た時にはメニューに出す情報を若干絞っています)
Pixivさんで読むリンクも追加すべきかどうか…追加するのは簡単なんですが、メニューがありすぎるのも閲覧者さんにとって不親切かな?という気もするのでもうちょっと悩んでおきます。

前述しましたが、最新話のラストページには感想フォームへのリンクを突っ込んでありますので、今後Web版を更新した際に「なにか一言送ってあげてもいいよ!」な気分になった時にはぜひぜひご活用ください。
もちろん、TwitterでのリプライやRT後のエアリプもウェルカムです。

各ページの中身には元々使っていた画像をそのまま使っているのですが、できれば余裕のある時にもうちょっと圧縮率をあげて軽量版に差し替えたいと思います。
1章総集編も年内にまた刷り足すので、その時にできればフォントサイズももう一回りだけ大きくできると…よいなあ…
(ページ数を見て遠い目になりつつ)

実を言うと、Web公開をはじめた時すでに文字を一回り大きくしているんですが、それでもまだスマホから見ると小さめなんですよね。
この作品を描き始めた頃にはここまでスマホが広まるとは想定していなかったので、元の原稿がB5サイズ600dpiですし…これ以上フォントサイズを弄るには、吹き出しから修正しないといけない…(さらなる遠い目)



そういえば。
2年くらい(?)前に、どこかに個人サイト向けのビューアはないかなってプラグインを探した時には、縦スクロールのものしかなくて諦めていたんですが。
(同人誌を出してるタイプの人が求めているのは、出版社や電書で使われている横めくりビューアだと思うんですよね)
最近になって、前には見つからなかったものもちらほら公開されているみたいで、ありがたいことだなあと思いました。

先日人様から教えていただいたこちらのビューアも、レスポンシブ&横スワイプ対応でよさげな感じです!
たしかフォロワーさんの中にも、自サイト用のビューアをお探し中の方が何人かいらした気がするので貼っておきますね。
なんかいい感じのマンガビューア ~slick-custom~

他にもどこかで開発中という風の噂も耳にしたので、なにか情報が入ったら共有したく思います。
つい先日TLでWCR終了のお知らせを聞いてびっくりしたんですが、どれだけ漫画投稿サービスが増えて主流になっても、自分の管轄で運営できる個人サイトはやっぱり持っておきたい気持ちなので!
商業サービスはどこかで終了してしまう可能性があるので、好きに更新&お引越しができる本拠地があるとどっしり構えていられるというのもあったりします。

まだまだ課題はありますが、一昨年から続いていたサイトのテコ入れもきりのいいところまで進んだので、そろそろ次のイベントに向けて動きだせそうです。

…というわけで。
今週末からは2章総集編発行にむけて、エンドレス修正作業の旅に出ています
ページ数が半端なくていきなり大量に刷るのが怖いので、今回は別のところで一冊だけ試しに刷ってから量産にむけて見積もりをだそうかなあとかなんとか。

先は長そうですが、がんばります!



最後に、(だんだん恒例になってきた)いただいたご感想へのお返事です。
※PCの場合、「続きを読む」からご覧ください。

 
スポンサーサイト



続きを読む »

フォーム改装…できませんでした!と思っていたらできました!

※漫画に関する内容ではありません
※できそうでできなかったよ!という記事なので、興味のない方は読まなくても大丈夫です…!

※2020/01/12追記 (たぶん)できました!!!!!
記事の最後に追記しています


三連休なので、年末年始にやりたかった感想フォームのカスタマイズにちょっとだけ時間を使ってもいいかな…?と軽い気持ちで手をつけたところ、案の定うまくいかなくて唸っていました。
できたー!→できてない…→今度こそできたー!→できてない…→今度こそ(略)を10回くらい繰り返して、このままだと本来の制作系の作業ができなくなりそうなので一旦次回に続きます。
つ、つかれた…

くやしいので残骸だけ貼っておきますね。
失敗した履歴を残しておくのも、なにか役に立つかもしれないので…!
うまくいかなかったフォームその1
(ブログ公開後に修正しました)

自作フォームを作って、Googleフォームのnameとaction=””を取得して連携させるところまではなんとかできたんですが、送信後に画面を遷移させないようにしたいな〜というのがうまくいきそうでいかなくて苦戦していました。
できたと思ったんだけどなあ…(あるある)

でもここまでやるのも自分のレベルだと結構大変だったんですよー!
めげないためにもセルフねぎらいしておきたいところです。
知らないことを色々と知れたし、何か別のことに役に立つと…いいよね…!


楽そうな方法はないかな〜ってあれこれ調べていろんなやり方をいくつか試してみて、最終的には某さんに教えていただいたこのあたりの記事を参考にさせてもらったのですが。

Googleform埋め込みでラジオボタンのデータを送信する方法
Googleform埋め込みで回答完了画面に遷移させない方法
Googleフォーム埋め込みでチェックボックス複数選択させデータを送信する方法

チェックボックスに複数チェックをつけて送信した時に、データは一応送信されるけどテキストエリア&テキストフィールドの情報だけ取得できなくなってしまうので、どこか私の書き方がおかしいようです。
(あと、必須項目のところ…)

これなら自分でもできそう!って思った、ダミーのiframeを使うやり方だとチェックボックスいじりまくっても大丈夫だったんですけど、送信できてない場合にも送信されました!って表示されてしまうようなので。
うまくいかなかったボツフォームその2


というわけで、しばらくは素の埋め込みフォームのまま押し切ろうと思います。
さりげなくどこかのタイミングで formrun に差し替えていたら「ああ…こいつ諦めたな…」と思ってください!

先日公開済みの、埋め込み型感想フォームだとこういう問題は起こらない…はずなのですが。
万が一、送信できてないことがあったら大変なので、しばらくはいただいたご感想にはできるだけ返信していくスタイルでいこうと思います!



※2020/01/12追記
一晩たって、心優しいフォロワーさんのおかげで(たぶん)解決しました…!


二箇所ほど間違っていたんですが、一番の原因は閉じタグの位置!です!!

間違えてたところ

根本的なところがよくわかっていないのが丸わかりな間違いで恥ずかしいんですが、教えてもらったら「そりゃそうだ…!」という顔になりました。
oh…そりゃ複数チェックしたらテキストのデータが取得できなくなりますね…

私はjavascriptとかjQueryに関しては本当にわかってなくて(jQueryの綴りすら検索しないと間違える)、親切な方が公開してくださっているコードをつぎはぎして色々便利な機能を使わせてもらっている状態なのですが。
わかっていないゆえに、つぎはぎする時によく間違えるんですよね。
(必須チェックでアラートを出すための記述も、入れるところを間違っていたし!)

ウウッ、でも今回でわからないなりにちょっとだけ前進した…気がします。

こういったうまくいっていない姿を見せるのって、正直なところ恥ずかしい気持ちもなくはないんですけど。
でも、恥ずかしがって何も出さないと「どこまではわかってるけど、どこからがわかってない」というのすら曖昧なまま全部なかったことになってしまうので、やっぱり思い切って「ここまではやったけど躓いちゃいました」みたいなことをオープンにする勇気も必要なんだって思いました。
できないことをできないと言う勇気…!

ちょっとずつ記述の仕方を変えて、あたっては砕けていたテストページの残骸たちも浮かばれました。

うまくいかなかったファイルたち

上の方にあるリンク先はそのうち消しておきますね…笑
メールで受信する設定にしてたのを忘れてて自分のテストによるメールが70通くらい届いているので、それも混ざらないように消しておかなくては。


ちなみに、Googleフォームを感想フォームに使えるよ〜というのは、もともとは「みつばの」のわかささんがブログでやりかたを書いてくださっていたのを見て、「いいかも!」と思って真似させてもらったのでした。

拍手感想フォーム修正しました (「みつばの」さんブログ内記事)

Googleフォームをそのままサイトに埋め込む方法だとスクロールバーの中にスクロールバーが出ちゃう&バーが出ないようにすると改行して長文を記述した時に送信ボタンが消えるという問題を解決するために、フォームのコード部分だけを自分でつくってデータの送信先をGoogleフォームにするというやつです。

フォーム送信後に画面遷移をさせないためにあれこれいじるところが、ちょ、ちょっと自分には難しいかも…?って思ってもっと簡単そうな抜け道を探したりしていたんですが、最終的にはほぼ同じやり方を使わせていただきました&記述がおかしかったところまで教えていただいてしまった!
(お忙しいところ、コードまで見ていただいて本当に助かりました;; 自力じゃ気づかなかった…)


というわけで。
たぶんちゃんと動くようになったんじゃないかな?な、感想フォームはこちらです!

新生・感想フォーム

…といいつつ、自分の環境からしかテストしていなくてちょっとまだ自信がないので、もしこの週末にちょびっとお時間がある方がいらっしゃいましたら、「自由記入欄」になにかコメントを入力した上で、送信のテストをしていただけますと助かります!
(ついでに一言付け加えていただいてもおっけーです!)



そして、最後に先日いただいたご感想へのお返事です。
(もともとはこれを書きたかったから、無理やりブログを書いたとも言えます…笑)

※PCの場合、「続きを読む」からご覧ください。

 

続きを読む »

2020年のご挨拶

明けましておめでとうございます。
三が日が終わろうとしているので、慌ててブログを書きにきました。

今年は子年とのことで、マオラも元旦から張り切っているようです(?)

子年4コマ

ちなみに、マオラの味覚は人間と同じなので実はネズミは食べないんですが、目の前にいるとつい本能的なものが目覚めて追いかけたくなってしまうようです。
フクロウの方の麻嗚蘿は…普通のフクロウなので、干支を食べてしまわないように引っ込んでもらいました。


それにしても2020年…2020年ですか…思えば遠くまで来たものだ…
去年の工程表を見てみたところ、(いきなり伏字で恐縮なんですが)2019年は「年内に●●●が登場するところまでは話を進める!」というのを密かな目標に、年末の休暇中にサイトを改装して、1月の6日からは秋のコミティアに向けてプロットを開始〜そのまま作画に突入していたようです。

イベントに参加したのも一回きりで、表向きの活動はちょっと控えめな年でしたが、そういう意味ではちゃんと(?)目標達成できたな〜と思いました。
iPadProも買って、作画環境もちょっと改善できましたしね!

こちらの記事も、たくさんの方に読んでもらえて嬉しかったです。


記事をきっかけにiPadを買った方が、お友達にお勧めするときにツイートを引用してくださっているのを通知で知ったりと珍しい体験もできました。
お勧めをしてはいいものの、果たして役に立ってくれただろうか?というのが少し気がかりだったので、「買ってよかった」というつぶやきも見かけて安心しました!

新しいものに挑戦したり環境を変えたりするのはどちらかといえば苦手なのですが、ここ2年でソフトも機材もまるっと変えたし、そういう意味ではがんばった!と言えるんじゃないかなあと思ったりしました。
次は…アプデをキャンセルし続けていたMacのOSを変えなければ…(Adobe CSのチキンレースを断念しました)


Twitterで作品の更新やイベントのお知らせをするようになってからも、もう4年以上経つんですね。
近年は、長距離マラソンを走るのに精一杯で最低限のことしかツイートしないとっつきにくいアカウントになってきたかも?というのが懸念点なので(特に2019年は、リプライしたいな〜と思うことがあっても余裕がなくてタイミングを逃してしまうことが多く…)今年はもうちょっと中の人が生きてる感じのアカウントにしたいです。(希望)

らくえれも、発行日のメモをふと見返してこれまでを振り返ってみるとたくさん歩いてきたなあという感じで、ずっと追いかけてきてくださった方も最近読み始めてくださった方も、本当にありがとうございます。

発行日メモ

2020年も引き続き、あの世界のお話を描いていきますので(まずは2章総集編の編集からスタートになりそうですが)どうぞよろしくお願いいたします!

◆◆◆

〜お正月の更新あれこれ〜

サイト&ハックさんの更新とちょっとタイミングがズレてしまいましたが、3章「幻影に望め」をPixivさんにもアップしました。



キャラ設定&表情集もPixivにあげてあります。
サイトのものと同じですが、一気に確認したいときは便利かもしれないのでよかったらどうぞ!



そして最後に。
昨年末に設置した感想フォーム、返信はしないつもりだったんですが黙っていられない性格なので(…)やっぱり、一言だけでもお礼をさせてください!
ひ、一言だけでも…

(PCの方は「続きを読む »」からお願いします)

 

続きを読む »

 | HOME | 

Calendar

« | 2020-01 | »
S M T W T F S
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -

Profile

ミズ

ミズ

個人的に漫画を描いたり、

いろいろ作ったりしている

人間のブログです。

サイトTOP

ブログの説明はこちら

最近の記事

よく読まれている記事

漫画用にiPadProを買いましたメモ

花粉症対策2019年まとめ

Categories

愛用してます

コダック

Monthly

レンタルサーバー

Advertisement