PHOTO METI PROJECT
ようこそ、まだ見ぬ日本の美しさへ あなたが知っている日本は、この国のほんの一部でしかありません。 日本には47の都道府県があり、そこには四季を映し出す豊かな自然と、 長い歴史を誇る建造物、各地で育まれた個性的な文化が広がっています。 まだ見ぬ日本の美しさを届けるため、FIND/47は生まれました。 © FIND/47 Office. Some Rights Reserved.Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution4.0 International license. © FIND/47 Office. Some Rights Reserved.Except where otherwise noted, content on this
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
簡単過ぎる！GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Googleのスプレッドシートを利用して誰でも手軽にPWAアプリを開発して公開することができるサービスをご紹介します！ スプレッドシートにデータを準備するだけなので、エンジニア以外の方でも簡単にアプリ開発を楽しむことができます。多彩な機能をグラフィカルなGUIで追加していくことも可能なので、ご興味のある方はぜひ参考にしてみてください！ 【 Glide 】 ■「Glide」の使い方 それでは、まず最初にGlideをどのように使っていけばよいのかを見ていきましょう！ サイトにアクセスしたら【Sign Up】ボタンをクリックして無償のユーザー登録を済ませておきます。 GlideはGoogleのスプレッドシートを利用するので、自分のGoogleアカウントから簡単にログインできるようになっています。 ログインが完了すると自分専用のダッシュボードが
AirtableのデータベースだけでWebサイトを作成・公開できるサービス「Table2Site」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回はクラウドデータベースのAirtableを活用して、独自のWebサイトを作成できるサービスをご紹介します。 プログラミングは一切不要で、視覚的に分かりやすいデータを編集するだけで高度なWebサイトを誰でも作成できるので非常に便利です。 企業や個人向けのWebサイトからプロトタイプまで、これから作成しようと検討している人はぜひ参考にしてみてください！ 【 Table2Site 】 ■「Airtable」の事前準備をしよう！ それでは、最初に事前準備として「Table2Site」のユーザー登録で必要になる「APIキー」をAirtableから取得します。 Airtableはクラウド上に誰でも簡単に扱えるデータベースを構築できるWebアプリケーションです。 まずは「Airtable」にアクセスしてログインを済ませておきましょう。 【 Airtabl
メテオフォール型開発 - 実践ゲーム製作メモ帳2
今日は、日本の代表的なソフトウェア開発手法について紹介しよう。 その名も、メテオフォール型開発である*1。 第一節 通常のウォーターフォール型開発におけるプロジェクトはこのような形を取るが、 メテオフォール型開発ではこのような形が取られる。 そしてこうなる。 これはアジャイル型開発手法におけるサイクルであるが、 神の前では無力である。 神の一声は全てを崩壊させ、 民は一生懸命これを再建す。 これが、メテオフォール型開発*2である。 第二節 全てのスケジュールは天界の都合によって決まる。これを黙示録と呼ぶ。 ソフトウェア開発においてフィードバックは重要なファクターだが、 神にフィードバックは届かない。 ただし、祈りを捧げることはできる。この祈りはごくまれに届く。 神は様々な姿を取る。 外から現れることもあれば、 内に棲んでいることもある。 あるいは、まだ会っていない or 会うことすらできな
フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか
フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。 Your Brain on Front-End Development 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デザインがあがってきた！ 複数行のテキストの長さに沿った背景 ヘッダはFlexboxで レイアウトはCSS Gridで 縦書きの要素 テキストの省略 カスタム フォント 画像上のテキスト SVGアイコン・レイティング ハンバーガーメニュー デザインがあがってきた！ フロントエンド デベロッパーの仕事は、さまざまなテクニックとテクノロジーを使用して望まれるUIとUXを引き出す
JavaScriptだけでTrello風タスク管理ボードを開発できるライブラリ「jKanban」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、簡単なJavaScriptコードだけでTrello風の「タスク管理ボード」を開発することができるライブラリのご紹介です！ 非常にカスタマイズ性が高く、自分好みのタスク管理アプリを構築したい人などには最適でしょう。 コードも簡単で初心者の方もすぐに理解できると思うので、ぜひ参考にしてみてください！ 【 jKanban 】 ■「jKanban」の使い方 それでは、まず最初に「jKanban」を利用するための準備から始めていきましょう！ 必要になるのは専用の「JS / CSS」ライブラリで、GitHubからそれぞれ取得して読み込むだけなのでお手軽です。 これらのライブラリは次のようにHTMLへ追記しておけば準備完了です。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>j
Corder's High 2017 「CSS設計方法論とその先」 レポート · Code of Duty
東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。 セッション8つめはピクセルグリッドの高津戸さん。 CSS設計方法論や各種ツールとどう向き合うか 自分が困っていれば採用すれば良い。 全部採用しようとするとコストが掛かりすぎる 多くのCSS設計方法論 OOCSS モジュール化 BEM クラスに命名規則を設け、シンプルなセレクタで書くルールに CSSの容量増えすぎてしまう問題への解決 モジュール化 ベース + スキン (OOCSS) ブロック + モディファイア (BEM) 書き方がみんなバラバラ問題への解決 コーディングガイドライン StyleLintを使う 同じコードへの対策 mixin, extendでコードDRYに Autoprefixerを使い管理をコード外に スタイルガイドで重複したモジュールの作成を回避 それで解決しない問題
テスト環境で使えるクレジットカード番号 - Qiita
実在するカード番号を利用することもできます。 カードの番号として妥当であれば上記以外の番号も利用することができます。 こちらのページで、番号の確認ができます。 【PHP】クレジットカードチェックサンプル カード番号以外の情報について 基本的に何でも大丈夫です。 名前・・・スペース区切りで名字と氏名を記入した名前なら何でも使用できます。(例: Taro Tanaka) 有効期限・・・現在時刻より未来の年月を有効期限として指定してください。 セキュリティーコード・・・適当な任意の3桁か4桁の数字を入れてください。 エラーさせるカード番号 テスト環境では、有効期限切れや、カード会社に決済を拒否されたり、偶発的に接続へ失敗した場合などに発生する例外（card_error）を、以下の番号を指定することで意図的に発生させることができます。 クレジットカード番号 card_errorのcode エラー内
Webサービス同士を連携する「IFTTT」の使い方とレシピ作成方法 – ワードプレステーマTCD
WordPressの機能だけを利用していると、次々にプラグインを入れてしまい、WordPress自体の動作が鈍くなってしまうこともあるかと思います。そんな時は、WordPressに機能を無理に搭載せずに他のWebサービスに頼ってみるのも良いでしょう。 「IFTTT」というWebサービスは、Webサービス同士を繋げる連携サービスです。WordPressに限らず、他のブログサービスでも活用することが出来るので、活躍の幅は無限大。 今回はそんな「IFTTT」サービスの使い方とレシピの作成方法をご紹介していきます。使ったことがない方は記事を読んでぜひ活用してみてください。 Webサービスを連携するWebサービス「IFTTT」 「IFTTT」とは、TwitterやFacebook、その他SNSをはじめとしたさまざまなWebサービスと連携できる便利なサービスです。「既存のWebサービスに存在する設定同
悪用厳禁：絶対に成功するA/Bテストの作り方
ソフトウェアエンジニアの間でも一般的な言葉になった「機械学習」。本書では、その機械学習やデータ分析の道具をどのようにビジネスに生かしていけば良いのか、また不確実性の高い機械学習プロジェクトの進め方などを「仕事で使う」という観点から整理し… オライリージャパンさんからは、売れ行きがとてもいいという話を伺っており、これで新しいノートPCを買う足しになるかなぁと思っています。 物理本については少数ですが、Cloudera World Tokyo2017で限定販売されるそうです。CWT2017申し込みが始まったので、物理版がほしい方は申し込むとよいんじゃないでしょうか。 書評もいくつか届いており、勝手ながら紹介させていただきます。
複数の rails プロジェクトが共存する開発環境を Docker 化した話を晒してみる
アプリケーションエンジニアの西辻です。 今回のブログでは、弊社のローカル開発環境を Docker 化した話をご紹介したいと思います。 このブログでは、なぜローカル開発環境を Docker 化する考えに至ったのかに始まり、 具体的にどのような方法で Docker 化を進めていったかを振り返りながら書いていきます。 また、Docker 化したことで受けた恩恵などを最後に書いて終わります。 Overview 大きく以下の項目について書いていこうと思います。 自分の仮想化環境への考え方について 今の現場に Docker 開発環境を導入する判断について 実運用している構成例を用いての説明 Docker for Mac のファイルI/Oのパフォーマンス改善方法 Tips: Docker コンテナに対して binding.pry を利用する ローカル開発環境を Docker 化した恩恵 自分の仮想化環境
フロントエンドチェックリスト（日本語訳） - Qiita
GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。 日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。 https://github.com/miya0001/Front-End-Checklist 日本語版への貢献方法 最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳) Front-End Checklist The Front-End Checklist is an exhaustive list of all elements you need to have / to test before lau
jQuery2.X系の安心・安全な読み込み方法 - Qiita
jQueryは2.X系からIE8以前のレガシーブラウザのサポートを廃止して高速化・軽量化を実現しました。 でもIEの旧バージョンを見捨てれなくて2.X系の利用に踏み切れれない事がよくありますね。 そんな時のために、安心・安全にjQuery2.X系を使用するたぶんベストな方法です。 ※最近(2014/1/31現在)jQuery2.1と1.11のリリースがあったので、最新版を使っています。 <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <
コピペで実装OK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ
ますます進化するウェブデザインの世界を体感でき、コピー&ペーストで利用することもできる HTML/CSS スニペットをまとめてご紹介します。ただいま流行中のWebトレンドの実装を可能にする最新レイアウトから、どんなプロジェクトにも活用したくなるエフェクトやテクニックなどを中心にまとめています。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 コピペでOK、最新トレンドを押さえたすごい HTML/CSS スニペット40個まとめ 01. Fixed Images That Fades as You Scroll 画面を２分割し、スク
【2016年上半期】ウェブデザイナーが注目したい、本当に流行中のWebデザイントレンド5つ
Medium で公開された「5 Actual Web Designs Trends for 2016」 by Nils Sköldの許可をもらい、日本語抄訳しています。 This article is translated from Medium (https://medium.com/). 「いつの間にか気付いたら、2016年も半分を過ぎていた。」そんなひとも少なくないかもしれません。今回は上半期の総集編として、ウェブデザイナーが押さえておきたい、実際に流行っているWebデザイントレンド5つを、サンプル実例サイトと一緒に見ていきましょう。 01. フルスクリーン表示 + スクロールなし。 スクロールしないウェブデザインが、いよいよ人気となりはじめているようです。ヘッダーの一番上にアンカーリンクを固定し、下方向にスクロールを促す単一ページのウェブサイトは、ホームページ作成のスタンダードと言
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2018年版】フロントエンドエンジニアがよく使うWebサービス・アプリまとめ - たこさんちゃんねる(別枠)
http://www.life-is-bitter.com/entry/ui_checklist
https://designer-draft.jp/articles/10
