MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 静的サイトジェネレータが人気ですが、それでも幾つかの機能においてはサーバサイドの仕組みが欲しいこともがあります。その一つがお問い合わせフォームではないでしょうか。しかしそのために全体をシステム化するのは面倒です。 そこでお問い合わせフォームだけ設置しましょう。そのためには特定の用途だけで使えるものが便利です。今回は日本製のphp-contact-formを紹介します。 php-contact-formの使い方 php-contact-formはBootstrapを使っていますのでUIは比較的簡単に変更できます。 確認画面付きです。 お問い合わせを送信しました。 問い合わせした人に対して確認メールも出ます。 もちろん運営側にもメールがきます。 php-contact-formはPHP

コンテンツ部分の高さがウィンドウサイズよりも小さくてフッターが浮いてしまう問題。 これまでの方法 レガシーブラウザにも対応するなら、「Sticky Footer Template for Bootstrap」でも紹介されているような手法を使わざるを得ない。コードは以下の様な感じ。 html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; } ビュ

ProtractorはAngularJSでE2Eテストをするための環境です。 セットアップ編・書き方編の２回に分けてテストを始めるまでのステップを紹介します。 この記事を書いた環境 Mac OSX 10.9 AngularJS 1.4 Protractor 2.1 Protractorとは AngularJS e2e-testing Protractor E2Eテストをするには、まずブラウザを起動してAngularJSのページを表示し、DOMを介してページ内のコンテンツにアクセスする事が必要になります。Protractorはそれらに必要な環境が含まれています。 ブラウザ操作ツール(Selenium) コンテンツにアクセスするAPI(WebDriverJS) テスト用フレームワーク(Jasmine) セットアップに必要なユーティリティ(webdriver-manager) WebDriver

緑はベンダープリフィックスが必要 前回との差異はAndroid4.4よりlinear-gradient (to bottom)に対応している点です。 Androidブラウザのシェア 現在のAndroidブラウザのシェアですが、Android4.0以下は非常に少なくなっており対応する必要はなくなってきています。 参考:Dashboards | Android Developers というわけで、-webkit-gradient()による指定はもう不要で-webkit-linear-gradient()とlinear-gradient()のみ記述しておけば、ほとんどのブラウザに対応可能です。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-linear-gradient( top, #b

watchifyでファイルの監視を行う babelifyで始めるES6ではBrowserify/babelifyを利用してES6を利用する方法を解説しましたが、gulp-watchなどを利用してファイル変更のトリガーでBrowserifyを実行すると非常に時間がかかってしまいます。そこで、watchifyを利用することで差分管理がされ高速にコンパイルすることが可能になります。 利用に至っては以下のコマンドでwatchifyとexorcistのインストールを行います。(exorcistは後ほどSourceMapを出力するのに必要) npm i -g watchify npm i -g exorcist そうすると以下のコマンドでwatchifyによる監視が可能になります。 (./src/app.jsとそこでrequireしている各ファイルで変更があったタイミングで./dist/app.jsを

ここ2, 3年、CSSアニメーションの進化がすごいですね！ 次のプロジェクトにさっそく使ってみたくなるようなものから、こんなことも出来るのか！という驚きのテクニックまで、CSSアニメーションのスゴ技・小技を紹介します。 Animated Gameboy in CSSのデモのアニメーションGIF まずは、CSSで作られたゲームボーイ。 上はデモをアニメーションGIFにしたものですが、下は生HTMLと生CSSです。 そのままのアニメーションでも驚きですが、ホバー時にはスケルトンになります。

最近のCSSフレームワークは大型化する傾向にあります。多機能で多数のUIパターンに対応しているのは利用者としては嬉しい一方で、フレームワークの提供する機能以上のことをしようとすると突然バランスが崩れてしまうことになります。 そこで使ってみたいのが最低限の機能を小さく提供するフレームワークです。今回はモバイルにも対応したKathamoを紹介します。 Kathamoの使い方 Kathamoのスクリーンショットです。まずはグリッド。よくある12分割です。 タイポグラフィ。 引用はこんな感じ。 フォームとボタン。 テーブル。 リスト。 アラート。 パネル。 ナビゲーションバー。 Kathamoには多くの機能はありませんが、レスポンシブなグリッドとよく使われるであろう機能を提供しています。後は足りないものを自分でデザインしていけば良いでしょう。機能が少ない分、全体のバランスが一気に崩れると言った心配

Instagramは相変わらず高い人気で、10代を中心に多くのユーザが日々写真をアップロードしています。そんなInstagramの売りと言えば、写真に対する格好良いフィルタではないでしょうか。 CSSGramはそんなInstagram風のフィルタをWeb上で再現してくれるライブラリになります。CSSレベルとあって、自由に変更も可能なのでWeb上で写真を効果的に見せるのに使えそうです。 CSSGramの使い方 CSSGramで使えるフィルタです。 青系、赤系なども格好良いです。 1977も良いですね。 CSSGramを使えば同じ写真であっても全く違う印象を与えるのではないでしょうか。また、Instagram風のWebサイトを作った際にもその写真の加工法として指定できると効果的ですね。 CSSGramはCSS3製のオープンソース・ソフトウェア（MIT License）です。 CSSGram u

7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับมิได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่เรามีให้เฉพาะสมา

レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ

画像にiPhoneやApple Watchのフレームを付けてくれるCSS「CSSDevices」 CSSDevices はクラス指定するだけで画像にiPhone/iPad/Apple Watch/Mac bookのフレームを付けてくれるCSSです。 投稿日2015年11月17日 更新日2015年11月17日 ダウンロード ダウンロードはGitHubから。 yamartino/CSSDevices ダウンロードしたフォルダにある「devices.css」「devices.js」と「jQuery」を読み込みます。 <link rel="stylesheet" type="text/css" href="devices.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

2015-10-31 2015年10月度のflexboxの書き方 CSS3 １年ぶりに業務でコーディング・・・が、早速つまずく。「display:flexは、仕様やら、OSやら、端末やら、いろんなものがコロコロ変わったみたいだけど、今はどう指定すれば良いの？」ってことで、flexboxの書き方を調べました。 ブラウザのサポート状況などから まずは、先にやってくれてる人がいないかネット検索。比較的新しめの記事がこちらでした。 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編1】を紹介します【2015年4月現在】 Flexboxの書き方 IE10、Safari、iOS Safari、Androidブラウザへの対応【実践編2】を紹介します【2015年4月現在】 コリスでは各プロパティを図で詳しく説明してくれています。 CSS3 Flex

「Highlighing Code Block」のプラグイン「Treeview」を導入したらコードブロックのテーマカラーが反映されない時の解決方法

2015.2.6神戸PHP勉強会 セッション1 10年続くサービスの裏側 おちゃのこネットの裏側とSmartyの導入方法について

2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move

こんにちは、投稿推進部の森川 (@morishin127) です。 エンジニアが既存のプロダクトの開発に携わる際、他人の書いたソースコードを読み解くところから始まります。過去に書かれたコードの意図を理解することは自分が書いたものでもしばしば難しく、他人が書いたものならなおさらです。この記事では過去に書かれたコードを理解するための工夫についてお話したいと思います。 なお、この記事ではプロダクトのソースコードはgitおよびGitHubのPull Requestを利用して開発が進められていることを前提としています。 特定の行から関連するPull Requestページを開く クックパッドのソースコードには概してコメントがあまり書かれておらず、見ただけでは理解しづらいような特殊な方法をとっている場合のみコメントを書いている印象です。基本的に実装に関する説明はソースコード中ではなく、GitHubのPu

はじめに こんにちは植木和樹です。オンプレで10年近くサーバーの保守運用をやっていた経験からいいますと、AWSの障害発生率は非常に低くて驚きます。数百台規模のサーバーを扱ってますと、毎日どこかでのサーバーでディスク、CPUファン、メモリーパリティエラーなんかの故障が起きていて日々対応に駆けまわってた覚えがあります。 さてAWSの障害発生率が低いといってもゼロというわけではありません。仮に0.1%だとしても1000日つまり3年運用していれば1回くらい障害に遭遇するものです。0.01%だったとしてもサーバーが1万台あれば1日1回なにかしらのトラブルに遭遇しても不思議ではありません。 トラブルに遭遇すると、当然サービスや処理に影響をきたしてしまうわけで早期の暫定処置と、その後に恒久的な対策が求められます。その時に重要なのは早く正しく原因を特定することです。トラブルシューティング力が重要です。 A

git fetch する度に"Auto packing the repository in background for optimum performance." が出るGit

2015/11/15　千葉県PTA　研究大会　in栄町 第6分科会「広報・IT活用」でのプレゼンテーション 【PTA活動】とことんIT化したらどうなるか？【やってみた】Read less

パスの末尾に/があるかないかを気にしたくない 文字列を結合してパスを生成したりするときに、パスを格納した複数の変数を文字列結合するときがあります。 dirHome="/var/lib/hoge/" workDirName="work" echo "${dirHome}${workDirName}" # /var/lib/hoge/workと表示される しかし、dirHomeやworkDirNameのような変数をコンフィグファイルで設定していたり、実際に参照するところと定義箇所が遠いときがあると厄介なことが起こりえます。 例えば、下記のようにdirHomeの末尾に/がなかったらどうなりますでしょうか？

Webアプリケーションを素早く組み上げられるフレームワークはとても重要です。ここ数年ですとRuby on Railsがそんな高速開発可能なフレームワークとして注目を集め続けていますが、他の言語でも類似フレームワークがたくさん存在します。 今回はそんなRailsっぽさはまるでなく、高速にWebアプリケーションを開発できるとしているフレームワークAllcountJSを紹介します。nodeを使い、デスクトップとスマートフォンの両方に対応しています。 AllcountJSの使い方 デモアプリです。プロフィールを表示するものになります。 編集画面があります。 スマートフォンにも対応しています。 スマートフォンでは画面遷移もスムーズです。 デモアプリではありませんが、AllcountJSではこんな感じにコードを書きます。 A.app({ appName: "Hello World", appIcon:

jQueryを使用する時、毎回全部の機能を使用していますか？ 必要としない機能を削除して、あなたが使用する機能だけのjQueryを作ることができるオンラインサービスを紹介します。 jQueryConfig jQueryConfig -GitHub jQueryのバージョンは、2.1.4, 1.11.3, 1.8.3 の3つに対応（2015年11月現在）しており、チェックボックスを操作するだけで簡単に自分が必要としない機能を削除して、軽量化されたjQueryをダウンロードできます。 jQuery 2.1.4 フル版 上のバーはjQueryの各機能とファイルサイズで、下のチェックボックスで必要としない機能のチェックをはずします。 最適化の助言 各モジュールには、下記の機能が含まれています。 Eventモジュール .on()と.off()メソッド、すべてのイベント機能、.click()や.mou

こんにちは、インフラストラクチャー部の菅原（@sgwr_dts）です。 インフラストラクチャー部は基本的にクックパッドのインフラに関わる業務を行っていますが、関連会社やグループ会社のインフラまわりについても作業を行ったりお手伝いしたりします。今回、グループ会社である「みんなのウェディング」のAWS化に伴ってそのお手伝いをさせていただいたので、そのときのモニタリングシステムの構築についての失敗談をお話ししたいと思います。 みんなのウェディングのAWS移行 みんなのウェディングは2015年4月にクックパッドグループに加わった結婚式場の口コミサイトです。いままでみんなのウェディングはVPSのホスティングサービスで動いていたのですが、グループ会社化に伴って大規模なリニューアルを進めており、その一環としてAWSへの移行を行いました。 AWSへの移行作業では様々な要素を検討する必要があります。パフォー

日本語の組版において 「縦書きと横書きの選択肢がある」 ということは極めて自然ですが、 世界的にはマイナーな 書字方向でもあります。 一方、東アジアでは 縦書きを利用している国が 一定数あり、横書きの文化圏においても 縦書きを利用するケースが 「珍しい」というほど 少なくないことも事実です。 横書きの文字組が中心だった Webの世界において、 縦書きの知見を取り込み、 縦と横の文字組を自由に デザインできるようになることで、 Webデザインは更なる自由と 高い表現の可能性を 獲得できると言えます。 私たち『次世代Webブラウザの テキストレイアウトに関する 検討会（縦書きWeb普及委員会）』は、 縦書きレイアウトの 国際標準化活動を推進し、 縦書きWebコンテンツの 普及促進に取り組んでいます。 The concept of being able to choose between a h

The document discusses a quality improvement project at Reality Inc. to reduce app startup time. It began with measuring startup sequences on iOS and Android to identify bottlenecks. This showed networking requests and initializing distributions were slow. Performance was then measured in user environments using Firebase and GCP tools. Startup times of over 6 seconds were found. The project aims t

今回、firefox dev conferenceに参加してきました。 www.mozilla.jp そこで聞いてきた、webextensionsに関して試してみたので、ログっておきます。 firefoxはアドオンの機能に関して、Chromeの拡張機能と同じ仕様を搭載することを発表しています。dev.mozilla.jp 実際、どのようにして作るのか紹介します。 WebExtensionsに関しては、WebExtensions - MozillaWikiに書いてあります。 環境構築 以下からFirefox Developer Editionをダウンロードします。 Firefox のダウンロード — 自由な Web ブラウザ — Mozilla リンクのURLからしてバージョンが変わると見れなくなりそうなので、 リンクに飛べない場合は、「DeveloperEdition」で検索してダウンロー

はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http