3つのSF本と読書サイトは、2年間続いているプロジェクトです。
そして、いまいましい、私はそれが好きです。 次に、私の作品を読むためのサイトをどのように作成したかを説明します。

誰もが自分の職業活動に関係のない趣味を持つべきです。 魂、リラクゼーション、自己実現、スキルの発達、活動の変化（最高の休暇） 数多くの実験を通して、私は執筆を選択しました。



最初の本を出版した後、私は非常に多くの良いレビューを受けました。 この点で、私は自己公開する便利な方法を発明する必要がありました。

なぜ紙の本ではないのですか？

最初はアイデアがありました-国の200の出版社に私の本を送り、答えを待つことです。 回答を受け取った後、編集者の助けを借りて、6か月間本を思い浮かべてから、2,000部のコピーをさらに6か月待つ必要があります。 これは広告なしで（そして初心者のライターには提供されません）1年間販売されます。 このオプションを検討し、趣味でお金を稼ぐことに慣れていないことを考慮して、インターネットでのプロモーションのオプションを選択しました。 現時点でのインターネット視聴者は、ネットワークに接続されていない本を読む視聴者以上であり、本屋に行きます。 私は紙の本に反対ではありませんが、初心者の作家を宣伝する方法として、紙の本は非常に複雑で長い道のりです。 （ルキヤネンコがネット上の無料テキストを.txtファイルで始めたことを思い出してください）

読書サイトはどうあるべきですか？

2回クリックするだけで誰でも本にアクセスできるようにするために、私は自分のサイトを作成し、自分の本を読んだり、電子リーダー用のお気に入りの形式で無料でダウンロードしたりできます。

そのようなサイトでは複雑に思えますか？ しかし、この魅力的な探求への道のりで、私はいくつかの驚きがありました。

私のサイトがどうなるかを考えて、私は自分の読者に変身し、すべての希望を考慮に入れようとしました。

本を持っているサイトへの現代の読者の願い：
1）読者（PDF、fb2、epub、mobi）向けに、目次付きの任意の形式で本をダウンロードできるようにしたい。
2）本の章にコメントを付け、感想を共有したい。
3）この本が気に入ったら、友人にショートリンクを提供したり、ソーシャルネットワークを使用したりできるようにしたい（たとえば、電話でサイトのアドレス「 990990.ru 」を口述する）。
4）職場にいるとき、読者を獲得できないため、サイトの読書にアクセスしたい。 読者がいなければ、同じアイテムが有効です。
5）サイトで読んでいるとき、私は最終的に読んだ位置をサイトに覚えてもらいたい。 家で本を開いて読み終え​​ることができるように。 それでも、私は登録が嫌いです。 ソーシャルネットワークからログインしたい。
6）読書中に広告やその他の注意をそらしたくない。 読書の背景を選択できるようにします。
7）スクロールを使用してこのような重いボリュームを読みたくない
8）読み取りを中断したため、最後に停止した場所を探したくありません。
9）彼の本が好きなら、著者の新しい本や未完成の本の章について学びたい。
10）本は興味深く、簡単な言語で、できれば「」の文字で書かれているべきです。

私も本を書かなければならないことを考えると、サイトの準備ができた後、筆者の要件を考慮しました。

彼のサイトの現代作家の要件：
1）サイトに直接書くことができれば素晴らしいことです。 フルスクリーンモードで気を散らさない、美しく、便利で、ミニマルなエディターが必要です。 iPadを含め、いつでもここにアクセスしたいです。
2）2回クリックするだけで、サイトは作家のScrvenerのお気に入りのプログラムからのテキストを受け入れます。
3）編集者は、作成された章の単語数をカウントして、章があまり長くならないようにし、その日の基準を自分で設定できるようにする必要があります。
4）新しい章の公開は、ワンクリックで実行する必要があります。
5）読者のフィードバックを知りたい。
6）読者の地理的位置と、ダウンロードおよびページングの書籍の統計を確認したい。
7）読者の見た目が読みやすく、読者をプロットからそらさないようにしたい。
8）友達に配布する短いリンク（たとえば、 990990.ruまたはwezel.ru ）が必要です。

ホイールまたはページめくりの本を保存する理由、
長いスクロールテキストをしのぐ：

これは利己的ですが、私にとって便利な読み方を選択しました。目の前に2400ページ以上が待っています。 私はSMS世代の明るい代表であり、読むのが大好きですが、周りのすべてに気を取られています。 友人に電話した後、気が散る前に彼らがいたラインに素早く目を戻すことができるはずです。
スクロールするのは好きではありません。長い「足」のテキストが誤って最初の部分に移動してしまう可能性があるため、停止した場所を探すよりも読み始める方が簡単です。 また、読書は気を散らすものを容認しない儀式的な行為です。
以下のページ番号でページネーションページを作成することはできましたが、読者はこのインターフェイスを学び、巻き戻しのロジックを理解する必要があります。 次の小さな数字に入るのも、主人公に共感し、朝の3時に眠りにつくときはそれほど簡単ではありませんが、読みたいです。
したがって、他の無意識の理由から、すべてが本物の本のように見えるように、ページネーションと混同することが決定されました。



そのような本では、ページ番号で目次を作成する必要があります。 最後を読んで印象を台無しにするのが好きな人にとって、この機能はとても良いです。 3つの作品をすぐに切り替えることができます。 この章の終わりに、小さな黄色のリーフレットにこの章のユーザーコメントの数が表示されます。 それをクリックして、読書で感動したものを追加できます。

白いリンクは普通の読者には見えません。彼らの助けを借りて、編集のために章を開いたり、新しい章を書いたりすることができます。

ページ番号、これが一番難しい

ページ番号のない本は、始まりがどこにあり、終わりがいつかわからない暗い地下室を歩くようなものです。 ページ番号のない目次は、単なるリンクのコレクションです。
問題は、長い本をページに分割し、同時に章を更新できるようにする方法です（この場合、章は増減できます）。 Bookmate.com-章内のページ番号を示すことにより、この問題を解決しました。 本全体に連続番号はありません。 これは私たちの方法ではありません。 私たちには私たち自身の仕事があり、ページ番号を再カウントすることで本を読む準備をする時間があります。

思い付くのに長い時間がかかる単純なアルゴリズム：

テキストがページに分割される長さ、簡単な言葉で説明しようとし、スクリプトを提供します。
1.本のソーステキストを取得し、そこに「ソフトハイフネーション」を挿入します。 これは、次の3行のコード（およびSergey Kurakinの作業）を使用して行います。

include 'hypher.php'; $hy_ru = new phpHypher('hyph_ru_RU.conf'); $text = $hy_ru->hyphenate($text,'UTF-8'); 

ハイフネーションなしでは、テキストは非常にまばらでコンパクトではありません。 プラグインの設定では、非常に長い単語に対してのみハイフネーションを設定しているため、テキストはきれいに見え、ハイフネーションは「分けられません」。 このコードは、文字「＆shy;」を追加します -ブラウザがこれらの場所で単語をラップできるようにします。

2.長い本を章に分割し、表1_bookに入れます。

numは章番号です。 bookは本の番号で、これまでのところ3つあります。 title-章のタイトル

3.「長い考えの」スクリプト（この作業については後ほど説明します）を使用して、単純なテーブル1_books_pを作成します。このテーブルでは、ページ番号が示され、どの章からこの章のテキストがカットされます。


そこで、すべてが事前に計算されるテーブルを作成します。 ユーザーは、本のページ付けを計算するのを待つ必要はありません（サーバーリソースを消費する必要もありません）。 すべてが私たちにカウントされます。 このスクリプトは、「ライター」が章を変更した後にのみ実行されます。 チャプタが単独で修正された場合、この変更されたチャプタの番号付けのみを数え直すことができ、次のページの番号付けは、何が起こったのか、何が起こったのかによって増減します。 1つの章のページを計算するスクリプトは1秒かかります。

スクリプト自体は次のとおりです。

 <? include 'hypher_.php'; include 'pass_of_db.php'; $hy_ru = new phpHypher('hyph_ru_RU.conf'); $book = intval($HTTP_GET_VARS['book']); $glava = intval($HTTP_GET_VARS['glava']); if ($glava == '') $glava=0; $db = mysql_connect ($config[mysql_host], $config[mysql_user], $config[mysql_password]); mysql_query("SET NAMES utf8"); mysql_select_db($config[base_name],$db); if (!$db) { echo "   SQL :("; exit();} $sqlnews2="SELECT * FROM `1_books` WHERE book=$book AND num=$glava"; $result2 = mysql_query($sqlnews2); @$sql2 = mysql_fetch_array($result2); $text=$sql2['text']; //    $text = str_replace("\r",'</p><p>',$text); //  ,  " "    ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> <script src="../src/js/jquery.js"></script> <script src="../src/js/cookie.js"></script> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <script type="text/javascript"> function jsDoFirst() { //   $.ajaxSetup({async: false}); var maxgl; $('#load2').load("getinfo.php?book=<? echo $book; ?>&page=2",function() { maxgl = parseFloat( $('.maxglav').html() ); num=1; gl=<? echo $glava; ?>; if (gl==0) { gl_start = 0; gl_finish = maxgl; } else { $('#load2').load("getinfo.php?book=<? echo $book; ?>&glava="+(gl-1)+"&lastpage=1"); num = parseFloat( $('.lastpage').html() ); if(!num) num=0; num = num+1; gl_start=gl; gl_finish=gl; } for(glava=gl_start;glava<=gl_finish;glava++) { lnk = "getinfo.php?book=<? echo $book; ?>&p="+glava+"&start=0&limit=1200000&num=1&final=5"; $.getJSON( lnk ,function(text) { i=0; first=0; for(j=0;j<=20000;j++) { first=i; step=800; if ((text.length-1-first)<=0) step=0; for(i=first;i<=text.length-1;i+=2) { if(j==0) pref="<h1></h1>"; else pref=""; $('#b-load2').html(pref+'<p>'+text.substr(first,i-first)); h = $('#b-load2').height(); if(h>=590) { i=i-1; newtext = text.substr(first,i-first); vv=razvedka(text,first,i); i=vv+first; newtext = text.substr(first,vv); next=first+vv; $('#load2').html($('#load2').html()+'<font size=-2em>start='+first+' to='+next+' num='+num+'</font>'+'<hr>'+newtext); lnk = "getinfo.php?writepage="+num+"&start="+first+"&to="+next+"&book=<? echo $book; ?>&glava="+glava; $('#load3').load(lnk); console.log(lnk); num=num+1; flag=1; break; } } if (flag==0) { next=text.length+1; lnk = "getinfo.php?writepage="+num+"&start="+first+"&to="+next+"&book=<? echo $book; ?>&glava="+glava; $('#load3').load(lnk); num=num+1; console.log('fin='+lnk); break; } flag=0; } }); } if (gl!=0) { lnk="getinfo.php?book=<? echo $book; ?>&glava="+gl+"&getback=1"; $('#load2').load(lnk); self.close(); } }); } function razvedka(text,first,i) { /*     :     ,  </p>  </p>,   </p>    ( .   <p>)    ,          <p2>.    ,      ,           . */ newtext = text.substr(first,i-first); space=newtext.lastIndexOf(" "); addspace=1; parag=newtext.lastIndexOf("</p>"); addparag=4; if ((space-parag)<5) {vv=parag; add=addparag; } else {vv=space; add=addspace; } return vv+add; } </script> <script type="text/javascript"> $(document).ready(jsDoFirst); </script> </head> <body> <div class="book_wrapper"> <div class="animate2"> <div id="b-load2" style="width:365px;padding-top:20px"></div> </div> </div> <div id="load2" style="background-color:white"></div> <div id="load3"></div> </body> </html> 

私はPHPとJavascriptのコーディングスタイルを誇りに思っていないので、スティックでコードを破らないようにお願いします。 私の説明の本質は、章を分割するための開始点と終了点を決定するアルゴリズムに関連しており、ページに収まるほど多くのテキストがあり、前のテキストをスムーズに継続します。

スクリプトの本質は、章から800文字を取得してdivに表示するという点で高く、サイト自体で本のページを正確に繰り返します。 このdivの高さが590ピクセルを超えない場合、2文字がテキストに追加され、その新しい高さが測定されます。 テキストを大きくして590ピクセルからクロールし始めるとすぐに停止し、Razvedka関数を使用して、段落の最後にある最も近いスペースまたは文字を探します。 そこで、この章を破る場所を見つけます。 「Getinfo.php？Writepage」-「1_books_p」の計算値をデータベースに書き込みます。

ページ番号のすべての計算は、ブラウザーのコンピューターで行われます。 サーバーでこれを行うには-私は成功しませんでした。 ページに正しく表示するために必要な文字数を予測するには、文字の幅を知り、ハイフンを作成し、段落間でインデントする必要があります。 このアルゴリズムは、私のアマチュアの脳には理解できません。

ページめくりアニメーションの作成方法：

最初は、プロジェクトのこの部分に数日を費やすと思っていましたが、奇跡的に30分ですべてを実装できました。 裏返しは1枚のシートの両面のアニメーションであることが判明しました。 1つのdivの幅をゼロに縮小し、もう1つのdivをシートの幅に拡大する必要があります。 ソリューションのシンプルさにまだ驚いています。 そのためjQueryが大好きです。

 function rotate() { ease = 'easeInQuad'; //easing -   tim = 700; maxpages=parseFloat($('.maxpages').html()); //  ,     $('.animate3').show(); //  div    $('.animate3').css("left",105).css("width",0); //         413  $('.animate3').stop().animate({"left": "523","width":"413"},tim,ease, function() { $('.b-load4').html($('.b-load3').html()); // ,        $('.num4').html($('.num3').html()); $('.animate3').css("left",105).css("width",0).hide(); $('.animate3').css("-webkit-box-shadow",""); if ( $('.b-load3 #end').html() != null ) //    ,   { update_comment(); $('.clip_right').fadeIn(600); $('.comments_right').fadeIn(600); } else { $('.clip_right').fadeOut(50); $('.comments_right').fadeOut(50); } if ( $('.b-load2 #end').html() != null ) { update_comment(); $('.clip_left').fadeIn(600); $('.comments_left').fadeIn(600); } else { $('.clip_left').fadeOut(50); $('.comments_left').fadeOut(50); } afterrotate(); }); $('.animate1').css("width",413).show(); //     (    0) $('.b-load1').show(); $('.animate1').stop().animate({"width":"0"},tim,ease, function() { $('.b-load1').html($('.b-load2').html()) $('.num1').html($('.num2').html()) $('.animate1').show(); $('.animate1').css("width",413); }); } 

アニメーション全体は、2つのディーバの同時移動で構成されています。1つは古いページで、もう1つは新しいページです。 きれいに見えますが、コードが読めない場合は理解しにくいです。 ページのクリックや矢印キーの押下でページングをバインドする方法は説明しません。 これは、サイト自体のスクリプトで確認できます。

1秒でサイトにログインする方法：

このようなサイトの承認は、1つの単純だが必要なことのために必要です。 読者は、最後に開いたページを覚えてはいけません。 モニターにブックマークを掛けることはできませんが、3冊の本があり、それぞれの位置を覚えておく必要があります。 素晴らしいLoginza.ru認証サービスを使用しました



中央の目的のボタン。 誰が望んでいるのか、クリックして、vkontakte、odnoklassniki、mail、gmail、facebookなどを使用してログインするのがどれだけ簡単かを試してみてください...
すべてのソーシャルネットワーク用のYandex Likeボタンはすぐそこにありました。 LIKEカウンター（「22人の読者が本へのリンクを投稿しました」）は、javascriptを使用してクリックをインターセプトします。

[背景の変更]ボタンをクリックすると、すぐに背景を選択して読むことができます。 ここでは、3冊の本のいずれかを選択し、「 本をダウンロードする 」リンクをクリックすることもできます。

PDF、epub、mobi、fb2をダウンロードしたすべてのユーザーをカウントします。

このプロジェクトを収益化する必要はないので、ファイルのダウンロードは無料です。
ページは次のようになります。



複雑なことは何もないように思えます。 しかし、次のように、リンクが公平に見える場合のダウンロードカウンターの作成方法： " wezel.ru/book/download/kovcheg-1.fb2 "？

w3bsit3-dns.comでの作業の経験から、リンクがサイトにドラッグされる頻度と、次のようなリンクを覚えています： "download.php？File = kovcheg-1.fb2"は本当に好きではありません。

これは、簡単なmod_rewriteによって解決されます。

 RewriteEngine On RewriteRule kovcheg-1.(.+..+)$ getfile.php?name=kovcheg-1&ext=$1 RewriteRule kovcheg-2.(.+..+)$ getfile.php?name=kovcheg-2&ext=$1 RewriteRule kovcheg-3.(.+..+)$ getfile.php?name=kovcheg-3&ext=$1 

この場合、getfile.phpスクリプトは次のとおりです。

 <? header("Content-type: application/x-gzip"); $name = $HTTP_GET_VARS['name']; $ext = $HTTP_GET_VARS['ext']; $filename = $name.'.'.$ext; if (!stristr($filename,'kovcheg')) exit; if (stristr($filename,'..')) exit; include "../pass_of_db.php"; $db = mysql_connect ($config[mysql_host], $config[mysql_user], $config[mysql_password]); mysql_query("SET NAMES utf8"); mysql_select_db($config[base_name],$db); if (!$db) { echo "   SQL :("; exit();} $sqlnews2="INSERT `1_books_log` (`id`, `identity`, `book`, `page`, `date`, `file`) VALUES (NULL, '".$_SERVER['REMOTE_ADDR'].' : '.$HTTP_COOKIE_VARS['identity']."', '-2', '0', NOW(),'".$filename."')"; $result2 = mysql_query($sqlnews2); $fd = fopen ($filename, "r"); $code = fread ($fd, filesize($filename)); fclose ($fd); switch ($ext) { case 'fb2' : echo $code; break; case 'epub' : echo $code; break; case 'pdf' : echo $code; break; case 'mobi' : echo $code; break; } ?> 

そのため、リンクが別のサイトにある場合でも、ファイルをダウンロードする読者の統計を収集できます。

私の職場はどのように見えますか：

私はここに本を書きます：

余計なものは何もありません。F11を押すと、頭の中でクリスタルプロットロックの構築を開始できます。 気を散らすものはありません。 Chromeは、入力中にテキストのリテラシーをチェックし、各本を終了した後、私が雇った修正者をチェックします。 私はコンマで大きな問題を抱えているので、修正プログラムがなければもっと難しいでしょう。
ブラウザのブックマークタイトルで、編集した章の単語数を数えます。これにより、章の単語数とほぼ同じ数（約2000）が得られます。

ストーリーの最後には、常にコメントがあります：

コメント-これは、インターネットをテレビ、ラジオ、書籍、音楽、映画と区別するものです。
コメントなしで現代の本を作るために、私の手は上がりません。 デザインはほとんどのインターネットユーザーに馴染みがあるため、見知らぬ人が読んだり、自分で書いたりできます。 コメントをプラスおよびマイナスできます。 彼は自分でスクリプトを書いたが、それについて複雑なことは何もない。

あなたの本は何ですか？ -あなたが尋ねる

3冊の本があり、それらは異なっています。
本1：これは、主人公が未来のモスクワにたどり着くまでの素晴らしい三部作です。 1500年が経過し、36世紀が来ました。 ガジェット、政治、自然、心理学はすべて詳細に記述されています。 「アークソーシャルネットワーク」は人類を救いますか？ 始まりは誰かにとって退屈に思えるかもしれませんので、せっかちな人は第18章から始めることができます。 本の終わりに、多くの人は数週間にわたってパターンと思慮深さの中断を持っています。

2冊の本：私たちの時代のアメリカについて語ります。 さまざまな人間の中毒の性質とその使用方法が説明されています。 予想外の角度から私たちを取り巻く世界の装置を見ます。 物語の中で、私たちは世界の陰謀の新しい理論に到達します。

本3：主人公と200,000人が別の惑星に落ちます。 記憶にない夢を見る珍しい白人の天使が住んでいます。 小説の主な問題は、2つの文明がどのように相互に関係するかです。

私よりも、この本について読者にレビューを伝えます 。

良い読書をしてください 。