- 投稿日：2022-01-16T16:42:35+09:00
ApacheでWebサーバー備忘録
ApacheでWebサーバー備忘録 Apacheとは 無料のWebサーバーソフトウェア。現在、最も世界でShareをとっている。 1995年から歴史が長く、安定性やサブ機能の豊富さ、他ソフトウェアとの互換性の良さで定評がある。 他のweb サーバーとしては、MicrosoftのIISやnginxがよく採用されている。 Apache Install 以下のWebsiteで.Zipファイルをダウンロードする。 C:直下などで展開して、Apache/conf/httpd.confを開いて、#ServerName*をコメントアウトを外して、ServerName*とする。 ServerName www.example.com:80 あとはC:Apache24binで以下のコマンドを実行して、Apache Webサービスを開始する。 C:Apache24\bin>httpd -k start Apache起動端末なら、http://localhost/ で、その他の同LAN内端末なら http://192.168.**.***/ で、閲覧できる。 ブラウザ表示で"It works!"と出れば正常にアクセスできている。 Web page公開は適当にフォルダを作成し、C:Apache/conf/httpd.confを開いて以下の該当箇所のパスを修正する。 DocumentRoot "C:\xampp\webroot" <Directory "C:\xampp\webroot"> 公開フォルダの直下にhtmlファイルを置いて、先ほどと同様にhttp://localhost/ か http://192.168.**.***/ で開くと、web pageが表示される。※Apacheは再起動 C:\Apache24\bin>httpd -k restartする必要がある。 公開フォルダの構造 webroot/ ├─ index.html ├─ css/ ├─ style.css ├─ img/ ├─ sample.jpg index.html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML Sample</title> <link rel="stylesheet" href="css/style.css"> <!-- <script type="text/javascript" src="sample.js"></script> --> </head> <body> <section class="wrapper"> <div class="container"> <div class="content"> <h2 class="heading">#######################</h2> <div class="list"> <div class="list-item">######################################</div> </div> </div> </div> </section> </body> </html> style.css /* container */ .wrapper{ width:100%; background-image:url(../img/sample.jpg); background-repeat:no-repeat; background-size:cover; background-position: center center; } .wrapper .container{ max-width:1000px; margin:0px auto; padding:80px 0px; } /* content */ .wrapper .content .heading{ margin:0px 0px 40px 0px; color:#ffffff; font-size: 24px; font-weight: normal; text-align: center; } @media (min-width: 992px) { .wrapper .content .list { display: flex; align-items: center; justify-content: center; } } .wrapper .content .list-item { padding:30px; line-height:1.8rem; color:#ffffff; text-align:center; } @media (min-width: 992px) { .wrapper .content .list-item { width:50%; } } 表示されるweb page Apache module install Apacheには豊富なmoduleがあり、以下のLinkで一覧が確認できる。非常に多くの"modle"が備わっています。 静的なモジュール(Install時に既に入っているもの) デフォルトでは以下のモジュールが入っている。 C:\Apache24\bin>httpd -l Compiled in modules: core.c - 常に使用可能な Apache HTTP サーバのコア機能 mod_win32.c - 起動時や再起動時に実行コードとモジュールをサーバにロードする mpm_winnt.c - Windows NT 向けに最適化されたマルチプロセッシングモジュール http_core.c - 常に使用可能な Apache HTTP サーバのコア機能 mod_so.c - 起動時や再起動時に実行コードとモジュールをサーバにロードする 動的なモジュール(Install後に追加する必要があるもの) C:\Apache24\bin>httpd -M Loaded Modules: actions_module (shared) alias_module (shared) allowmethods_module (shared) asis_module (shared) auth_basic_module (shared) authn_core_module (shared) authn_file_module (shared) authz_core_module (shared) authz_groupfile_module (shared) authz_host_module (shared) authz_user_module (shared) autoindex_module (shared) cgi_module (shared) dir_module (shared) env_module (shared) include_module (shared) isapi_module (shared) log_config_module (shared) mime_module (shared) negotiation_module (shared) setenvif_module (shared) ..... まとめ Apacheのinstallと簡単なweb siteを表示した。非常に簡単にWeb siteを立てられ、初心者でWeb siteに興味のある方は簡単にやってみるといいと思った。
- 投稿日：2022-01-16T13:31:58+09:00
Siemaをスマホ対応 メモ
今回Siemaをスマホ対応させてみたメモになります。 前提として、 Siemaとは JavaScriptによる、画像スライダー https://pawelgrzybek.github.io/siema/ 詳しくは、ほかの人のこれらがわかりやすかったです。 【JavaScript】単体で使える超軽量スライダー［Siema］は初心者の方にオススメです。 https://on-ze.com/archives/6194 超軽量スライダーSiemaが最高なのでお勧めしたい https://suzumenote.com/tech/395 やりたいことは、 表示される画像をPCでは2枚、スマホでは1枚にしたい。 HTMLまたは、CSSまた、公式Siemaのオプションではできない？わからなかったので、Siemaのsiema.min.jsファイルをいじりました。 ただ、JavaScript言語が全く分からない、なので取り敢えず弄ってみましした。 （あまり時間がなかったので、JavaScriptを学ぶのはまたの機会に） 本題の追加コードですが、こちら if(document.body.scrollWidth<=750) this.perPage=1; になります。 意味は ビューポートの幅 (スクロールバーの幅を除く) が750以下なら画像の表示枚数を1にする、です。 ビューポートの幅とは、簡単にブラウザの(スクロールバーの幅を除く)横幅サイズになります。これらのサイトを参考にしました。 Element.clientWidth https://developer.mozilla.org/ja/docs/Web/API/Element/clientWidth JavaScriptでウインドウサイズを取得 https://web-designer.cman.jp/javascript_ref/window/size/ 追加コードを siema.min.jsファイル { key:"buildSliderFrame", value:function() { /*追加コード*/ if(document.body.scrollWidth<=750) this.perPage=1; ここに入れます。 場所を探すのはkey:"buildSliderFrame"を目印にすると良いと思います。 問題のなぜここの場所に入れるかが、自分でもよくわかってないです。 ここの場所に入れた経緯を書いていきます。 まず、一行で公式コードが書かれているので、{} や ; や , で改行しました。 そしてperPageの変数、が画像の表示数であることが、公式オプションから読み取れました。 なので、この変数を探しました。 (jsファイルを開くのにMery を使いましたが 検索機能 便利でした) その最中にkey:~~があり key:"Next" や key:"prev" など見たことあるものがあり、そこからkey:~~は処理内容にそった文字列だと予測、またfunctionがJavaScriptの関数であることが調べてわかりました。 なので、perPage変数がある関数の最初の行に追加コードを書いてみて、webブラウザで動作確認してみたら、key:"buildSliderFrame",の関数にのみ追加すれば、問題なく動くことがわかりました。 というのが、一連の流れになります。 ちょっとした、わかったこと。 超軽量スライダーSiemaが最高なのでお勧めしたい https://suzumenote.com/tech/395 にて multipleDrag 謎です。とのことが書いてありましたが、 表示枚数を３枚にすると、わかりやすいですが、 multipleDragをfalseにすると三枚をすべて新しい画像にスライドできなくなります。 multipleDragをtrueにすると三枚をすべて新しい画像にスライドできます。 ということです。 ちょっとした、コード。 HTML <script> var mySiema = new Siema({ selector: '.siema', duration: 500, easing: 'ease-out', perPage: 2, startIndex: 0, draggable: true, threshold: 20, loop: true, onInit: () => {}, onChange: () => {}, }); document.querySelector('.js-prev1').addEventListener('click', function() {mySiema.prev()}); document.querySelector('.js-next1').addEventListener('click', function() {mySiema.next()}); setInterval(() => mySiema.next(), 5500); </script><!-- スクロール自動化 --> CSS @media (max-width:767px){ .siema-btn ul{ display:grid; grid-template-columns: 100%; grid-template-rows: 50% 50%; } .prev{ grid-row:2/3; } .next{ grid-row:1/2; } } こちらのCSSはnext,prevボタンの表示順序がPCでは横並び、スマホなら縦並びなら、縦並びの時、prevボタンが上に来てしまうので、nextボタンを上に持ってくるCSSです。 参考にしたもの 「display:grid」の使い方について【備忘録】 https://freemas.org/making/css/display-grid PCでは横並び スマホなら縦並び nextを上に持ってきたのが右。