フラップイズム[B!]新着記事・評価

iPhoneやiPadで2回タッチしないとリンクが反応しない問題について【スマートフォン】フラップイズム

5 users

www.flapism.jp

どうも、くーへいです。制作している段階で少し詰まった部分がありましたので、メモの意味も含めて記事にしたいと思います。 iPhoneやiPadでタッチが反応しない？あるお客さんから、サイトの動作が重いということで、改善できないかという相談をいただきました。そのサイトは、レスポンシブによって構築されており、タイトルをタッチすると中身が開く仕組みになっていたのですが、その動作が重いという相談でした。私は所持しているスマートフォンはAndroidで、お客さんはiPhone。 Androidではサクサク動くため、社員にiPhoneを借りて検証していましたが、不思議な現象が起きていたのです。ざっと動作をまとめると以下のような感じでした。 Android ：不具合無し iOS 8.1.1 ：不具合無し iOS 8.4.1 ：タイトルを2回タッチしないと内容が開かないどうやら、タイトルを

テクノロジー
2015/09/18 20:29

jQuery
iOS

ゼロから学ぶ、AngularJS入門(1) フラップイズム

3 users

www.flapism.jp

こんにちは、くーへいです。 AngularJSについて学ぶ機会がありましたので、ゼロから少しずつ学んだことをフィードバックしていきたいと考えています。というわけで、今日はAngularJSの特徴などを中心にお話ししたいと思います。 AngularJSとは？ AngularJSは、Googleが開発し、オープンソース化されたJavaScriptのフレームワークです。ライブラリでも、テンプレートでもなく、フレームワークとして分類されています。要は、複雑なJavaScriptのコードを簡単なコードで実行できるようできると考えれば問題ありません。細かいことはさておき、何ができるかを見て行きましょう。 AngularJSで出来ること基本的な例 AngularJSのもっとも基本的な機能は以下の通りです。「Hello」のあとに、リアルタイムで入力された文字が反映されていくのがわかるでしょうか

テクノロジー
2015/03/05 17:51

レスポンシブなサイトをつくりたい！実装方法はじめの一歩フラップイズム

4 users

www.flapism.jp

どうも、くーへいです。ここ数年は、「レスポンシブデザイン」のウェブサイトが流行していますよね。ある意味、作りこまれたウェブサイトの代名詞にもなっているように感じます。今回は「レスポンシブデザイン」の実装について、フロントエンドエンジニア目線で記事にしてみます。今さら「はじめの一歩」？と思われるかもしれませんが、「セオリー」が固まりつつある今だからこそ、確認する必要があると思います。そもそも「レスポンシブデザイン」とは？「レスポンシブデザイン」が流行する前は、スマホ用のウェブサイトはディレクトリを変えて、別サイトとして構築することが多かったと思います。「レスポンシブデザイン」では、サイトは同じなのですが、デバイスやブラウザサイズによって適用するCSSを変更することにより、PC向け、タブレット向け、スマホ向けのデザインを適用することができるウェブサイトを指します。つまり、同一の

テクノロジー
2015/02/17 15:28

*あとで読む

今から準備するCSS4！CSS4に関する最新情報まとめフラップイズム

6 users

www.flapism.jp

こんにちは、くーへいです。この記事では、CSS4について最新情報をまとめていきたいと思います。 CSS3も覚えきっていないのに、もうCSS4・・・と思うかもしれませんが、CSS4も引き続きモジュール単位での策定が進んでいて、場合によってはセレクタだけLevel4のものが浸透していったり・・・ということは十分に考えられます。仕様が固まり、ブラウザへの実装が進んでから覚えても問題ありませんが、最新動向はチェックしておいた方が良いでしょう。この記事でも随時、最新情報を更新していく予定です。 CSS4として策定が進んでいるモジュール一覧 ※2014年9月12日現在。 ※策定における用語等はCSS3まとめの記事を参照してください。セレクタ（Selectors Level 4）・・・2013年5月2日　作業草案（2014年8月12日に編集者草案が公開）、改訂中背景・境界線（CSS Backg

テクノロジー
2015/01/08 11:48

あとで読む

フロントエンドエンジニア必読！Web開発に関連するツール・技術5分野別まとめフラップイズム

3 users

www.flapism.jp

こんにちは、くーへいです。 6月21日に「FRONTREND IN NAGOYA」に参加してきました。第一線で活躍するフロントエンドエンジニアの皆さんの講演を聞いて、俄然やる気が出てきております！さてさて、今回はそんな講演の中で出てきた技術についてまとめてみます。すでに良く知られているものもあれば、知らなかった！というものもあるかと思います。当然ですが、全部習得するのは不可能だと思いますので、気になったものを習得していくのが良いでしょう。このページに技術を随時まとめていき、個別の記事を書いたらリンクを張ろうかと思っています。ちなみに、読み方は正しいとは限りませんのであしからず・・・。バージョン管理 Git（ギット）バージョン管理と言えばこれ、というくらいに浸透していますね。分散型のバージョン管理システムです。同種のシステムもいろいろありましたが、現時点ではGit一択と言

テクノロジー
2014/12/18 16:38

unclassified

「コーダー」と「フロントエンドエンジニア」の違いまとめフラップイズム

4 users

www.flapism.jp

どうも、くーへいです。ウェブ業界というものができて10数年が経ちましたが、技術の進化はもちろん、職種の変化も多くありました。この記事では、くーへいが名乗る「フロントエンドエンジニア」を中心として、ウェブ業界の職種についてまとめてみたいと思います。 ※あくまでくーへいの考えるものです。「コーダー」とは？「コーダー」という職種は、ウェブ業界の初期からあるものだと思います。「コーダー」という呼び方のほかに、「HTMLコーダー」、「マークアップエンジニア」と言ったりもしますね。語源としては「コーディング」する人を「コーダー」と呼ぶことから来ていると思われます。プログラムを書くことも「コーディング」と言いますので、「プログラマー」を「コーダー」と呼ぶ場合もありますが、最近では「コーダー」と言えばHTMLコーディングする人を指すことが多い気がします。厳密にいえば、「コーダー」と「マーク

テクノロジー
2014/12/15 09:37

違いを説明できますか？「フルパス」「絶対パス」「相対パス」の違いフラップイズム

6 users

www.flapism.jp

どうも、くーへいです。今日は、WEB制作者が良く使う言葉の解説として、「フルパス」、「絶対パス」、「相対パス」の違いをまとめてみたいと思います。皆さんは、その違い、分かりますか？違いを簡単にまとめると・・・最初に簡単にまとめると、以下のようになります。なお例示は一般的な構造がわかりやすいので、勤務先のカタツムリデザイン（http://www.katatsumuri-inc.com/service/homepage.html）をベースとしていますが、サーバー内部のパスはダミーです。この記事では、公開領域を「/home/katatsumuri-inc.com/www/public_html/」とします。「フルパス」・・・サーバー内部で、最も上位の階層から参照した際のパス例）/home/katatsumuri-inc.com/www/public_html/service/hom

テクノロジー
2014/11/20 23:01

MEMO

W3CのCSS3に関する仕様書を全部読んでリファレンスとしてまとめてみたフラップイズム

12 users

www.flapism.jp

どうも、くーへいです。この記事は、CSS3のモジュールをW3Cの仕様書に基づいてまとめています。 CSS2までは1つの仕様書になっていたのですが、CSS3からは個々の機能ごとにモジュール化され、ブラウザはそれぞれのモジュール機能を搭載するかしないかを選べるようになっています。そんな状況ですので、CSS3とは何かがいまいち明確になっていませんし、各仕様書も10年前に作業終了したものから未だに作業中のものまで多岐にわたっています。そこで、この記事でまとめてしまおうというわけです。詳細については各記事を公開次第、この記事にもリンクを作成します。この記事も随時更新しますので、お楽しみに。 ※各タイトルの日本語名は筆者によるもの。カッコ内の英語名は仕様書のまま。 ※各仕様書の策定状況は記事公開時点（2014年7月◯日）とします。状況確認次第、お知らせします。 ※ブラウザ対応状況は「Can

テクノロジー
2014/10/15 18:29

WordPressの一歩踏み込んだパーマリンクカスタマイズフラップイズム

15 users

www.flapism.jp

皆さんWordPressライフ楽しんでますか？くーへいです。今日は、WordPressのパーマリンク、いわゆるURLについて、書いていこうと思います。デフォルトのパーマリンク WordPressはPHPで作られていることはご存知ですよね。 WordPressで使用されているPHPに限らずCGIでも同様ですが、PHPのファイルにアクセスする際、PHPは様々なパラメーターを受信し、それに応じた中身を表示します。様々なパラメーターとは、閲覧者が入力したデータであったり、一時保存したデータ（Cookie）であったり、URLもその1つです。例えば、「http://example.com/index.php?p=123」といったURLの場合、「p」というパラメーターに「123」という数字を格納したうえで「index.php」を開く、という指示を送っているわけです。「?」はこれ以降はパラメータ

テクノロジー
2014/09/07 11:08

CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）フラップイズム

51 users

www.flapism.jp

こんにちは、くーへいです。先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。今回はみんな大好き、アニメーションです！ jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。 IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。 CSS3におけるトランジション（transition）とアニメーション（animation）の違いパッと見では分かりにくいのですが、違いは以下の通りです。トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能トラ

テクノロジー
2014/08/13 03:23

CSS3の「フレキシブルレイアウト」使い方まとめフラップイズム

405 users

www.flapism.jp

どうも、くーへいです。今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。最初にブラウザの対応状況について注意点「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。「

テクノロジー
2014/06/09 11:44

プロの「フロントエンドエンジニア」になるために必要な10の心得フラップイズム

5 users

www.flapism.jp

くーへいです。まったくの異業種、つまり「未経験」から「フロントエンドエンジニア」に転職して、2014年3月末で1年になろうとしています。転職するまでは、趣味程度にサイトを作ったことがある程度でしたが、転職後は50以上のサイト構築に携わり、”プロ”の「フロントエンドエンジニア」になれたかな、と思っています。それもこれも、勤務先（カタツムリデザイン）の代表が丁寧に教えてくれたからですね！さて、今回は私が”プロ”になれた！と感じられるようになるまでに心掛けていたことをまとめたいと思います。「やる気」と「1年という時間」と「この心得」があれば、”プロ”の「フロントエンドエンジニア」になることができるはずです。（※あくまで、私が考えることであって、”プロ”になれることを保証するものではありません。）なお、「フロントエンドエンジニア」とは、「HTML」や「CSS」のコーディングをはじめ、

テクノロジー
2014/05/29 09:49

カスタム投稿タイプを作成できるWordPressの関数「register_post_type」の使い方まとめフラップイズム

19 users

www.flapism.jp

こんばんは、くーへいです。こういう使い方もしてみようかな、ということで、今回は備忘録的に「register_post_type」についてまとめてみました。カスタム投稿タイプとは「register_post_type」は、カスタム投稿タイプを作成できる関数です。関数の解説をする前に、まずカスタム投稿タイプについて少しだけ説明します。カスタム投稿タイプは独自の投稿を作るイメージ WordPressでよく使うものと言えば、「投稿」と「固定ページ」ではないでしょうか。カスタム投稿タイプは、その標準の「投稿」とは別に、オリジナルの「投稿」を作るようなものだと思っていただければいいと思います。既存の「投稿」ではできなかった、こんなすごいことができる！というイメージよりは、かゆいところに手が届くようなイメージでしょうか。読者よりも、記事を投稿する人が使いやすくなるカスタマイズとも言えそう

テクノロジー
2014/04/15 20:25

「Google マップ」の埋め込み地図をカスタマイズする方法まとめフラップイズム

61 users

www.flapism.jp

※2014年3月12日更新「Google マップ」は2月にバージョンアップされています。操作性が大きく変わっていますので、説明を加えました。なお、「Google Maps JavaScript API v3」を使用している部分には変更ありません。このまま使用できます。 ※2014年3月26日更新 bodyのjavascriptの関数を読み込む記述が消えてしまっていましたので、修正しました。申し訳ございません・・・。 ※2016年8月31日更新 2016年6月22日に「Google マップ」のAPIが変更され、APIキーが必須になりました。なお、APIを使用せずに埋め込む場合はAPIキーは引き続き必要ありません。どうも、くーへいです。最近ではない方が珍しいと思うくらい、「Google マップ」を埋め込んだホームページは多いですよね。制作会社にいる皆さんは、「サクッ」っと埋め

テクノロジー
2014/03/02 21:56

「301 リダイレクト」で引き継げること、引き継げないことフラップイズム

3 users

www.flapism.jp

どうも、くーへいです。実は、先日こっそり、このブログの名前を変更しました。「くーへいの技術メモ」から「フラップイズム」になりました。ブログ名が変わっても変わらずのご愛顧をよろしくお願いいたします！「フラップイズム」は、直訳すると「はばたくこと」となります。ゆくゆくは洗練された技術を持ったフロントエンドエンジニア、そして尊敬されるCTOに「はばたくこと」を目指していきたいと思います。さてさて、それに伴い、URLも「tech.birds-song.net」から「www.flapism.jp」に変更されています。 URLを変更した場合、旧URLで築いたものを全て失う・・・わけではありません。「301」リダイレクトという手法を用いることによって、旧URLで築いたものをある程度、新URLに引き継ぐことができます。もちろん、完璧にというわけにはいかず、引き継げないこともあります。今回

テクノロジー
2014/03/02 21:21

「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめフラップイズム

367 users

www.flapism.jp

※2014年2月26日に更新しました。要素及び属性をなるべく新しい仕様書に準拠、その他頂いたコメントへの対応を行いました。 ※2014年3月3日更新しました。タグと要素の違いについて追記。本文内でタグと要素の記述が間違っていた部分を修正。「要素が要素をまたがってはいけない」というのはどの形式でも同じなので、記述を削除。どうも、くーへいです。今日はある方からリクエストされた記事を書こうかと思います。皆さんは、コーディングをするときに「HTML 4.01」、「XHTML 1.0」、「HTML5」のどれを使っていますか？実際には案件ごとに使い分けているかもしれませんね。この投稿では、それぞれの違いについて、考えていきたいと思います。 ※要素とタグを混同する方も多いですが、要素とタグでは意味が全く異なります。例えば、「<html>・・・</html>」は要素ですが、「<html>」や「

テクノロジー
2014/02/20 20:16

はてなブックマーク

はてなブックマーク