Clever Geek Handbook

静的サイトでのオンラインコンパイル、初心者向けのレシピ



あなたはプロジェクトを数年間書きましたが、今ではユーザーを引き付けたいですか？ 独身者とベーコン入り卵焼きのようなシンプルなレシピがあります。



簡単なサイトを準備するには、次のものが必要です。



コンポーネントを変更し、お気に入りの言語用にサイトを実験して準備します！



料理ホスティング



この例では、ホスティングにGitHubを使用します。 はい、はい、リポジトリを操作できるだけでなく、プロジェクトのサイトを公開する機能も提供します。 必要なのは、gh-pagesブランチを作成し、そこにあるサイトでindex.htmlファイルをコミットすることだけです。 

# :       user     GitHub, #  repository    . #      : git clone github.com/user/repository.git #   gh-pages cd repository git checkout --orphan gh-pages #    git rm -rf . #    index.html echo "Test" > index.html git add index.html git commit -a -m "Testing gh-pages" #     GitHub git push origin gh-pages


これで、ページがhttp（s）で利用可能になりました：//user.github.io/repository/。 もちろん、必要に応じて、別のホスティングを選択できます。



静的なHTMLディッシュを飾る





今度は、サイトに何か有用なものを入力します。 インターネット上で目に優しいHTMLテンプレートを見つけて、ホスティングにドロップします。 

 #   html   : cp -rf ../folder_with_template/* ./


シェフのコツ
テンプレートを選択するときは、モバイルデバイスで正しく表示されるかどうかにすぐに注意する必要があります。 これは非常に簡単に行われます：ページスケールを変更します（Ctrl + +）。 大規模なテンプレートは見栄えがよく、水平スクロールバーは表示されません。



今、料理の中で最も難しいと創造的な部分。 完成したテンプレートにコンテンツを入力し、プロジェクトの説明、ドキュメント、その他の有用なものを追加する必要があります。



完了したら、すべてをコミットしてGitHubに送信することを忘れないでください。 

 git add * git commit -m "Added some content" git push




肉コードを準備する



マリネには、jQueryとjavascriptで記述されたAceエディターが必要です。 これらのコンポーネントなしで実行することも、他のコンポーネントに置き換えることもできます。 個人的には、いくつかのエディターを試しましたが、Ace.jsが最も便利で機能的であるように思えました。 欠点のうち、重量は最大500Kbです。



オンライン編集を配置するページ上の場所を選択します。 適切な場所に追加します。 

 <div id="code"> ... your code goes here ... </div>


CSSとJavaScriptの読み込みを忘れずに追加してください： 

 <style type="text/css" media="screen"> #code { width: 100%; float:left; min-height:100px; overflow: hidden; } </style> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/ace/ace.js"></script>


次に、エディターを構成する必要があります。 

 <script> var code; $(function() { code = ace.edit("code"); //      id="code" code.setTheme("ace/theme/textmate"); //       code.getSession().setMode("ace/mode/c_cpp"); //       C++  code.setShowPrintMargin(false); // :     80  code.setOptions({ maxLines: Infinity, // :       fontSize: "12pt", // :     }); code.$blockScrolling = Infinity; //  ,     }); </script>


シェフのコツ
リポジトリからドキュメントページにコードをコピーするときは、常に状況を避けたいです。 これが行われない場合、リポジトリとページ上のコードが同期していない可能性が高くなります。 その後、すばらしいページに期限切れの製品が表示され、ユーザーから苦情が寄せられます。



GitHubを使用すると、クロスオリジンのリソース共有が可能になるため、これを回避するのは非常に簡単です。 つまり、http（s）の静的ページからリソースを要求できます：//user.github.io/repository/、たとえばraw.githubusercontent.comから。 コードの後に​​次を追加するだけです。$ blockScrolling = Infinity; 

 $.get("https://raw.githubusercontent.com/user/repository/master/" + "path_to_source_file_in_repo.cpp", function(data) { code.setValue(data); //      code.clearSelection(); // :      });


上級シェフは、エラーチェックを個別に追加し、適切なメッセージをユーザーに表示できます。



その結果、美しい構文強調表示でエディターにコードが表示されるはずです。





フライベーコンコード



そのため、コードをコンパイルするボタンと、ページに結果を表示する場所を追加する必要があります。 

 <button id="run" onclick='run();'>Run</button> <p>Output:</p><pre id="output">Waiting...</pre>


オンラインコンパイルでは、Coliruサービスが次のことを支援します。 

 function run() { //       var cmd = "g++ -Wall main.cpp -o main_prog && echo 'Compilation: SUCCESS." + " Program output is:\n' && ./main_prog && echo \"\nExit code: $?\""; var output = $("#output"); output.text(''); var to_compile = { "src": code.getValue(), "cmd": cmd, }; output.text("Executing... Please wait."); $.ajax({ url: "http://coliru.stacked-crooked.com/compile", type: "POST", data: JSON.stringify(to_compile), contentType:"text/plain; charset=utf-8", dataType: "text" }).done(function(data) { output.text(data); }).fail(function(data) { output.text("Server error: " + data); }); };


なぜコリルが選ばれたのですか？
オンラインコンパイルには多くのサービスがありますが、それらのほとんどには外部APIがないか、このAPIは文書化されていません。 Coliruは、私が獲得したC ++コードの最初のオンラインコンパイルサービスでした。





友達に料理をあげましょう



最後の仕上げはそのままで、スクランブルエッグのチェリー、ケーキ！ ユーザーを引き付けるためにこれをすべて開始した場合、合理的なステップはソーシャルボタンを追加することです。



SocialLikesプラグインを使用できます 
 <link rel="stylesheet" href="social-likes_flat.css"> <meta property="og:title" content="Your Title"/> <meta property="og:image" content="Your logo"/> <link rel="canonical" href="https://user.github.io/repository/"> <meta property="og:url" content="https://user.github.io/repository/"/> <meta property="og:site_name" content="Your repository name"/> <meta property="og:type" content="website"/> <meta property="og:description" content="Your short description"/> ... <script src="social-likes.min.js"></script> ... <div class="social-likes right" data-counters="no"> <div class="facebook" title="Share on Facebook">Facebook</div> <div class="twitter" title="Share on Twitter">Twitter</div> <div class="plusone" title="Share on Google+">Google+</div> <div class="vkontakte" title="Share on VK">VK</div> <div class="odnoklassniki" title="Share on Odnoklassniki">Odnoklassniki</div> <div class="mailru" title="Share on MyWorld">MyWorld</div> </div>




できた！ 他の人にあなたをpoして欺くように強制することは残っています。 たとえば、「こんにちは、ヴァシャ。 ソーシャルボタンが機能するかどうかを確認してください！」



合計ではなく



得られた料理はあなたの好みに合わせて変更できます。 GitHubの代わりに、好きなサービスを使用できます。ColiruはCコードもコンパイルできます（他の言語もサポートされている可能性があります）。 オンラインコンパイルには多くのサービスがあります。検索すると、好きな言語の同様のサービスを見つけることができます。



このミニレシピが誰かに役立ち、プロジェクトに双方向性を追加することを願っています。



私の場合の結果は次のようになります： apolukhin.github.io/Boost-Cookbook-4880OS



PS：難しくない場合は、ソーシャルボタンが機能するかどうかを確認してください。


More articles:


All Articles