前の記事のinput dateに今日の時刻を表示する方法を記述しましたがよりすくないコードでさらに高速に動作する方法を紹介いたします。 wakalog.hatenadiary.jp コードは以下を参照してください var date = new Date(); var yyyy = date.getFullYear(); var mm = ("0"+(date.getMonth()+1)).slice(-2); var dd = ("0"+date.getDate()).slice(-2); document.getElementById("today").value=yyyy+'-'+mm+'-'+dd; 0を足した後でslice(-2)で最後の二桁を取得しています。 型変換していないない分それだけ速く動きます。 以上、少ないコードでかつ高速で今日の日付を取得することができるので、 前回の

そうだ！いらすとやを動かそう！！ こんにちは。にしやまです。 突然ですが、皆さんは「いらすとや」をご存知でしょうか？ 某大型家電量販店の店内ポスターに使用されていたり、SNSで拡散されたり、目にする機会が多いのでご存知の方も多いかと思います。 可愛いイラストのフリー素材サイトなんですが、中には「こんなのいつ使うんだろう」っていうようなネタ画像もあって見てまわるだけでも面白いです。 こんなのとか。 こんなのまで。 ある日のことです。 いつものように「いらすとや」を巡回していたぼくはふと思いました。 この愛すべきゆるキャラ(？)たちがイキイキと動いているところを見てみたい！それも超ヌルヌルに！！…と。 というわけで、今回はSpineを使って「いらすとや」をヌルヌルと動かしていきます！ ※Spineについては前回の記事「Spineを使って２Dキャラクターを３Dのように動かす」を参照ください。 ま

社内のフロントエンド、マークアップエンジニア向けに話をしそうなので、そのメモ。 なんとなくで読んでください。 Index 「Webサイト用」モダン開発環境 パフォーマンス施策 Webサイト制作において必要な条件 モダンな技術を採用しつつ、今までの案件で使える SPAではなくWebサイトに対応 HTMLファイルが各ページで存在している head内の情報が直接書かれている きれいなHTML minifyされていない Nuxt.jsのgenerateみたいに、最適化されすぎていない 変えたいもの 脱Gulp Gulp -> npm scripts（タスクランナー） Gulp -> webpack（バンドラー、トランスパイラー） jQuery -> Vue.js & Vanilla.js ES2015+ -> TypeScript（Classベース） EJS -> Pug 脱Gulp（Gulpをや

PHPの関数は、複数（２つ以上）の戻り値（return値）を指定できます。 下記のソースコードをご覧ください。 <?php function getTextSample(){ $a = '東京'; $b = '大阪'; $c = '名古屋'; return array($a, $b, $c); } list($a, $b, $c) = call_user_func("getTextSample"); echo $a . '<br>'; echo $b . '<br>'; echo $c . '<br>'; ?> 関数 getTextSample は、３つの戻り値（$a, $b, $c）を返します。 複数の戻り値を返す際は、配列にて指定します。 受け取る側（関数の呼び出し側）では、list を用いて、各戻り値を変数に格納します。 ブラウザへの表示結果は、下記のようになります。

MS製テキストエディタ Visual Studio Code の インデント幅(タブサイズ)の変更方法 変えても反映されない時の対処法 その他インデント周りのプロパティの解説 を載せています。 デフォルトのインデント幅である4のままではRubyで困るので、インデント幅を2に変えた時のメモです。

Teams 無料版！！ 少し前の事になりますが、Microsoft Teams の無料版がリリースされていました。 利用には Microsoft アカウントが必要ですが、グループとして 10GB + 1 ユーザーあたり 2GB が 300 ユーザーまでのストレージも含めて、無料で利用できます。 サインアップしてみる サインアップは office.com/teamsfree からおこないます 必要なのは、Microsoft アカウントで使用しているメールアドレスと、 ユーザーの氏名、電話番号、会社名です。 Slack よりちょっと面倒な気がしないでもないですが、登録時に電話番号認証されるわけでもないですし、会社名のチェックが入るわけでもないので、適当に入れておきます。 サインアップ直後、謎のエラーが出ましたが、teams.microsoft.com で開き直すと無事にサインインすることができ

Bootstrapを利用してフォームを実装しましたため、v-modelやバリデートなどについてまとめます。 イケてるフォーム イケてるフォーム 初期状態 初期状態です。 入力内容に不備がある入力欄はエラーとして赤字、赤枠で表示します。 また全ての不備が取り切れるまで Submit ボタンは disabled とします。 イケてるフォーム エラー状態が即時に反映 何か入力し、エラーがなくなるとリアルタイムでフォームに反映されます。 イケてるフォーム Submit可能状態 全てのエラーがなくなると、Submit ボタンがアクティブになり、ボタンを押下することができます。 ごめんなさい、普通のフォームでした。 環境 Node.js 7.7.x npm 4.4.x Vue.js 2.2.x 素のHTML イケてるフォーム Vue.js 化前の状態 上の状態、Vue.js の処理を入れる前の状態の

やりたいことはWebpackだけでも実現できますが、今後ページが増えていくことを考えるとgulpを使用したほうがスッキリ書けそうなので、gulpとWebpackを併用しました。最近gulpの名前をめっきり聞かなくなりましたが、元気にしているだろうか。 Webpackとgulpの使い分け、あるいは共存 Webpack webpack is a static module bundler for modern JavaScript applications. https://webpack.js.org/concepts/ 色々なファイルをまとめて、モリモリなJSファイルを出力してくれる。BabelやSassなどのローダーを設定するだけで、いい感じに変換してくれる。プラグインを使えばHTMLやCSSなどのファイル出力もできます。 gulp gulp is a toolkit for autom

これまで、プロジェクトに関わらず共通利用できるローカルの node_modules は、ユーザのホームディレクトリに作成してシンボリックリンクを作成する形にしていました。 node_modules をシンボリックリンクで管理する： https://bunlog.dreamseeker.dev/managed-node_modules-directory シンボリックリンクを JSON で管理する Alfred Workflow を作ってみた： https://bunlog.dreamseeker.dev/alfred-createsymlinks-workflow macOS Sierra にアップグレードしたタイミングで設定の見直しをしていたところ、シンボリックリンクすら不要なことに気づいたので、備忘録を兼ねてまとめてみます。 そもそも、どこを参照しているのか？はじめに、Node.js

フォーム要素のスタイルをリセットしたい場面がよくあるので、それぞれのスタイルのリセットを試してみます。 サンプルコード 特に設定しない場合、以下のような表示になります。 HTML <form action="" class="form"> <div class="form_item"> <div class="form_key">お名前</div> <div class="form_value"> <input type="text" /> </div> </div> <div class="form_item"> <div class="form_key">性別</div> <div class="form_value"> <input type="radio" name="gender" id="male" /> <label for="male">男性</label> <input

TL;DR 受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。 オリエンテーション／受注前 １．書類テンプレート一式 オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。 企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ ２．見積もりの目安と計算方法 例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人

CSSで三角形を作るといえばborderを利用したものが有名だけどサイズの計算とか扱いとかがちょっとめんどいので普通のdivとかの背景を三角形にしたくなった。した。 普通にwidth/heightを設定するだけでかってに伸縮してくれるのがいいところで、底辺が100%の三角形とか、width:autoのような挙動をする三角形を手軽に作れる。 .bottom{ background: linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/50% 100%, linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/50% 100%; } .top{ backgrou

こんにちは、Webデザイナーのニシです。インフルが怖い。 今日は非エンジニアのバリバリ文系デザイナーがgitを使った苦労話とめっちゃ良かったよ！の話です。 コマンドラインや英文を見ると頭痛がするタイプなので、覚えるのは大変でした。 私はコマンドラインを諦めてSourcetreeに頼っています。さらに、弊社では元々GitLabを導入しているので、マージリクエスト（以下、MR）など便利な機能も使えます。 その話はまた後ほど。 導入は大変でしたが、結果的には大変良かったです。もうGit管理なしではhtml書けません。 Webデザイナーでもフロントエンド（html / CSS / javascript / PHP）部分をやるって人も多いと思いますが、そういった方でまだGit使ったことないよ、という人がいればぜひこの記事を読んで導入を検討してください。 ※本記事はGitやGitLabの使い方を説明す

はじめに 前記事でこんなものを書いていました。 【前記事】ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字 ☝上記記事を応用して出来ることが増えたのでまた記事を書きました。 text-shadowのドロップシャドウって薄くない？ text-shadowって、ぼかしも利かせられて手軽にドロップシャドウ出来るのが便利ですよね。 でも、個人的にこれだと少し影が薄いかなーと思っていました。 ※文字色指定などは省いています。

Visual Studio Codeの使い方、基本の「キ」：特集：Visual Studio Code早分かりガイド（1/6 ページ） Microsoft発のクロスプラットフォームなテキストエディタ、「Visual Studio Code」の使い方の基本をまとめる（バージョン1.25対応）。

noneとすれば圏点をなくすことができる。また、上記の表にはない任意の一文字を圏点として指定することもできる。 仕様書には、以下のことも定められている。 filledとopenのいずれも指定されない場合、filledとして扱われる。 filledもしくはopenのみ指定した場合、横書きではcircle、縦書きではsesameとして扱う。 圏点の文字サイズは，圏点を付ける対象となる要素の文字のサイズを50%とする。 圏点は縦書きモードでは要素の右側に来なければならず、文字を回転させてはならない。 フォントが圏点に使用する字体を持ってないか、字体があっても不適当な大きさを使用することが考えられる。ユーザーエージェント（ブラウザ）は圏点に適切なフォントを用いることができ[MAY]、ユーザエージェントによって合成してもよい[MAY]。 例 filledを指定 ぼくもできなかった。Linux がぼく

はじめまして。技術グループでマークアップやCMSのカスタマイズを担当しているoguraです。 皆さんのパソコン環境は、Macでしょうか？それともWindowsでしょうか？ 今回は、Macのアプリケーション「Dash」の活用法をご紹介したいと思います。 Windowsユーザーの皆さん、ごめんなさい。 Dashは、Mac用のドキュメント検索・スニペット機能のアプリケーションですが、今回は主に「スニペット機能」についてご紹介します。 ここで言うスニペットとはGoogleの要約文のことではなく、「プログラミング言語のなかで切り貼りして再利用できる部分」のこと。 「Dash」は、よく記入する定型文・ひな形をスニペットとして登録しておき、コマンド一つで呼び出す機能を持っています。 日本語変換で、よく使う言葉をユーザー辞書に登録しているかたは多いと思いますが、要はそれと同じような理屈です。 ちなみにうち

最近多くの人達がプロジェクトの中でSassもしくはScssを使用していると思います。変数などの便利な機能があってそれぞれを別ファイルにして管理できるなど便利な点がありますが、ファイルの数やコード数が多くなってきてそれぞれがどういった動きをするのかが分かりにくくなっていると思います。そこで便利なのがこの SassDoc です。これは変数や@mixinを見つけてそれらのドキュメントを作成してくれます。 インストール