はてなブックマーク

閲覧者に負担をかけないために PHPで重い処理を行う際にバックグラウンドで実行したい場合があります。 例えばAPIの取得で大容量の通信が発生する時などです。 そのまま処理が進むと閲覧者のパケットが大変な事になります。 またアクセスから表示までの時間も長くなり離脱の原因にもなってしまいます。 そこで exec を用いて閲覧者に負担を書けないようにバックグラウンドで処理を行います。 サンプル サンプルではバックグラウンドでテキストファイルを作成してみます。 この処理自体は大したものではありませんが、 バックグラウンドで動いていることが理解しやすいかと思います。 index.php <?php $cmd = 'nohup php exec.php > /dev/null &'; exec($cmd); exec.php <?php $file = 'test.txt'; $text = 'バック

見出しなどのテキストを画像で作成することがよくあるのですが、 レスポンシブでスマホ閲覧時はテキストにしたかったので、 JSでalt属性をテキストとして出力させることで対応しました。 サンプルソース HTML 例えばH2を画像で作ったとします。 クラスにaltTextを指定してください。 <h2 class="altText"><img src="https://try-m.co.jp/wp-content/uploads/2016/09/150x150.png" alt="ALTテキスト"></h2> CSS PCとSPの出し分けのためのクラスを作ります。 .pcはPC閲覧時のみ、.spはSP閲覧時のみ表示されます。 .sp { display: none; } @media screen and (max-width: 768px) { .pc { display: none; } .s

使わないという選択肢 基本的にトライムではweb上で公開されているリセットCSSや、 Normalize.cssは利用していません。 社内ルールを勝手気ままに作って、みんなを従わせている僕の個人的な意見として、 意図していないスタイルがあるのが気持ち悪いというのもあります。 しかし、実際にリセットCSSやNormalize.cssに書いてあるすべての記述が必要になるのでしょうか？ トライムでは長年に渡る厳選の末、下記のようなスタイルを使っています。 トライムのCSS @charset "UTF-8"; * { margin: 0; padding: 0; } html { font-size: 62.5%; } body { font: 500 1.4rem/1.6 "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "

ドロワーメニューまたはスライドメニュー 呼び方は様々ありますが、スマホのアプリ等でもお馴染みの、 横からスライドインしてくるメニューです。 レスポンシブでもよく使われます。 JSのプラグインだと、mmenuやDrawerなどがありますが、 現在ではCSS3もほとんどのブラウザで利用可能になりましたので、 簡単なものであればCSSでも実装可能です。 ※IEでは9以降で動作します。 動作デモ まずはデモを用意しました。実際に動かしてみてください。 See the Pen Gjygdy by leo (@leo-trym) on CodePen. ソース HTML <label class="toggle" for="open"><i class="fa fa-bars" aria-hidden="true"></i> </label> <input id="open" type="checkb

ミッション、videoタグの再生終了後にスライド bxSliderはレスポンシブ対応のスライダーです。 トライムでも使い勝手がよいので、よく利用します。 一枚目が動画で再生終了後にスライドが始まるという、 少し難しいご要望がありましたので、 bxSliderのコールバックを利用して実現してみました。 ループして一枚目に戻ると、また動画の再生が始まります。 動作デモ 実際の動作をご確認ください。 ※下のボックスにマウスオーバーすると「RERUN」というボタンが右下に出ます。 最初から確認したい場合はそちらをクリックして下さい。 See the Pen yaEzox by leo (@leo-trym) on CodePen. ソース HTML <ul class="bxslider"> <li><video id="video" src="video.mp4"></video></li> <

プルダウンに親子関係 select要素にjQueryを使って親子関係を持たせる方法をご紹介します。 まずは実際に下記にサンプルを用意しました。 実際のソース HTML 都道府県のoption要素にdata-valがあることに注目してください。 同じ地方に属する都道府県は同じ値になっています。 <select class="parent" name="foo"> <option value="" selected="selected">地方を選択</option> <option value="北海道・東北">北海道・東北</option> <option value="関東">関東</option> <option value="甲信越・北陸">甲信越・北陸</option> <option value="東海">東海</option> <option value="関西">関西</opt

最近よく見るメガメニューですが、簡単なものならCSSだけで実装できます。 まずは下記で動作をご確認ください。 デモ ABOUTとCOMPANYにマウスを乗せるとメガメニューが開きます。 フェード フェードイン・フェードアウトのアニメーションです。 See the Pen megaMenu by leo (@leo-trym) on CodePen. アコーディオン ちょっと工夫すればアコーディオンのような動きも可能です。 See the Pen megaMenuAcc by leo (@leo-trym) on CodePen. サンプル HTML HTMLの構造は簡単です。 メインメニューの中にサブメニューが入ります。 <nav id="gnav"> <ul> <li><a href="">HOME</a></li> <li class="toggle"> <a href="">ABOU

トライムでは殆どの案件がレスポンシブWebデザイン対応しています。 下記の記事にも書いていますが、サイトによってはPCとスマートフォンのシェアが逆転することもあり、スマートフォンへの対応は欠かせなくなっていますね。 https://try-m.co.jp/blog/web-marketing/229/ 沢山のサイトを作っていく中で、少しずつ効率化していった技術があり、今回はその一部をご紹介いたします。 画像を差し替える レスポンシブWebデザインでよくあるのが、PC用とSP用の画像の差し替えです。 SVGに対応したブラウザの普及で、同じ形の画像をPC用とスマートフォン用に分ける必要性はなくなってきてはいますが、やはり画面サイズの違いから、形の異なった画像に差し替えなければいけないケースは多々あります。 そんな時、例えばCSSだけで実現しようとした場合、下記のような方法が考えられます。 HT

ファイルの更新時間と現在時刻を比較 アクセスしたファイルが更新から24時間以上経過していたら、 という処理をjQueryで書く必要があり、色々努力した結果下記のようになりました。 $.ajax({ url:'file.txt', success: function( data, status, request ){ var time = new Date( request.getResponseHeader('Last-Modified') ), //ファイル更新時間 now = new Date( $.now() ), //現在時刻 hours = Math.abs( now - time ) / 36e5; //時間差を計算 if ( hours > 24 ) { alert( '24時間以上経過' ); } else { alert( '24時間以内' ); } } }); 5行目で