両手塞がってる人におすすめ!勝手にスクロールしてブログが読める機能作ったよ!

今日は会社をずる休みしたものの、無気力すぎて何もやる気にならず

ゴロゴロするのも勿体無いので前からこんな機能あったらいいなーて思ってたものを自作しました。

 

勝手にスクロールするやーつ

こんなことないすか?

 

ご飯食べてる時でもブログ見たい

スマホでレシピを見たいけど両手がベタベタでスマホにさわれない

、、、

 

全く例が思いつかない

 

貧弱な語彙力と想像力に脱帽!

 

とりあえず、僕はご飯食べているときにブログを見たいのです。

右手に箸、左手に茶碗を維持しながら勝手に画面が動いて文字を読みたいのです。

 

 

作ってみた

僕は現在プログラマー

 

簡単なものなら自作しちゃうぜ!

ということでとりあえず↓のボタンをクリック!クリック!

 

スクロール

 

メロスは激怒した。必ず、かの邪智暴虐じゃちぼうぎゃくの王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。きょう未明メロスは村を出発し、野を越え山越え、十里はなれたシラクスの市にやって来た。メロスには父も、母も無い。女房も無い。十六の、内気な妹と二人暮しだ。この妹は、村の或る律気な一牧人を、近々、花婿はなむことして迎える事になっていた。結婚式も間近かなのである。メロスは、それゆえ、花嫁の衣裳やら祝宴の御馳走やらを買いに、はるばる市にやって来たのだ。先ず、その品々を買い集め、それから都の大路をぶらぶら歩いた。メロスには竹馬の友があった。セリヌンティウスである。今は此のシラクスの市で、石工をしている。その友を、これから訪ねてみるつもりなのだ。久しく逢わなかったのだから、訪ねて行くのが楽しみである。歩いているうちにメロスは、まちの様子を怪しく思った。ひっそりしている。もう既に日も落ちて、まちの暗いのは当りまえだが、けれども、なんだか、夜のせいばかりでは無く、市全体が、やけに寂しい。のんきなメロスも、だんだん不安になって来た。路で逢った若い衆をつかまえて、何かあったのか、二年まえに此の市に来たときは、夜でも皆が歌をうたって、まちは賑やかであったはずだが、と質問した。若い衆は、首を振って答えなかった。しばらく歩いて老爺ろうやに逢い、こんどはもっと、語勢を強くして質問した。老爺は答えなかった。メロスは両手で老爺のからだをゆすぶって質問を重ねた。老爺は、あたりをはばかる低声で、わずか答えた。
「王様は、人を殺します。」
「なぜ殺すのだ。」
「悪心を抱いている、というのですが、誰もそんな、悪心を持っては居りませぬ。」
「たくさんの人を殺したのか。」
「はい、はじめは王様の妹婿さまを。それから、御自身のお世嗣よつぎを。それから、妹さまを。それから、妹さまの御子さまを。それから、皇后さまを。それから、賢臣のアレキス様を。」
「おどろいた。国王は乱心か。」
「いいえ、乱心ではございませぬ。人を、信ずる事が出来ぬ、というのです。このごろは、臣下の心をも、お疑いになり、少しく派手な暮しをしている者には、人質ひとりずつ差し出すことを命じて居ります。御命令を拒めば十字架にかけられて、殺されます。きょうは、六人殺されました。」
 聞いて、メロスは激怒した。「あきれた王だ。生かして置けぬ。」
 メロスは、単純な男であった。買い物を、背負ったままで、のそのそ王城にはいって行った。たちまち彼は、巡邏じゅんらの警吏に捕縛された。調べられて、メロスの懐中からは短剣が出て来たので、騒ぎが大きくなってしまった。メロスは、王の前に引き出された。
「この短刀で何をするつもりであったか。言え!」暴君ディオニスは静かに、けれども威厳をもって問いつめた。その王の顔は蒼白そうはくで、眉間みけんしわは、刻み込まれたように深かった。

 

以下略

 

 上に戻る

 

どうです?

右手に箸、左手にお茶碗を持っていてもがっつり「走れメロス」を読めたことでしょう。若干、スクロール時間はやいかな?

 

まあ続きが気になった方はこちらへ

太宰治 走れメロス

 

使い方

記事内に作りたい場合はHTML編集モードにして開始したい位置にこれをコピペ

 

<a id="start" class="square_btn" href="#">スクロール</a>

 

スクロールを止めたい位置にこれをコピペ

 

<a id="return" class="square_btn" href="#">上に戻る</a>

 

この「上に戻るボタン」はよくあるやつ

記事の最後に置いてあってクリックすると一番上に戻るやつと同じ仕組みですね

 

記事の最後とかてきとーなとこにこれをコピペ


<script>
$("#start").on('click',function(e){
e.preventDefault();
$("html,body").animate({scrollTop:$('#return').offset().top}, { duration: 60000});
});
</script> 

 

「duration: 60000」ってとこの60000がスクロールさせる秒数

ミリ秒単位なので1000で1秒です。

今回は60000にしているので1分かけて「上に戻るボタン」までスクロールします。

 

「デザイン」→「カスタマイズ」→「デザインcss」にこれをコピペ

 

.square_btn {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #fd9535;/*色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #d27d00;/*線色*/
}

 

ボタンのデザインですね。今回はこちらを参考にさせていただきました。

saruwakakun.com

 

欠点

クリックした人は気づいたかもしれないけど、

これ一度クリックしたら止まりません

 

マウスぐりぐりすると画面がぶぶぶって感じで激しく抵抗しますん

画面再読み込みとかしない限り、強制メロス読書モード突入です。

 

画面右隅とかに「ストップボタン」作って一時停止とかしようかと思ったけど、意外とめんどくさそうで断念

 

気が向いたらちゃんと作るかも

 

使いたい人いるの?

こんな人に向いてます。

 

ページ滞在時間を伸ばしたい!

リロードでもいいからPVを伸びしたい!

 

僕のこの記事も強制メロス読書モードのおかげで1分以上の滞在時間は確保されることでしょう。

 

でも、真面目な話、こんな感じの機能流行ってほしい

あったら便利レベルだけどちょっとストレス軽減するし技術力ある人頑張ってくだしあ