はてなブックマーク

レスポンシブデザインが一般的になってきた昨今。 多様化するデバイスでのレスポンシブデザインのレイアウト確認はとても骨が折れます。 出来たら一度に一瞬で確認できればいいのに なんてのはレスポンシブデザインのコーディングを行う全ての人が思っていることかと思います。 Sizzyを使えばそんな悩みは一瞬で解決されます。 今回は主要スマホ、タブレットのレイアウトの表示確認が一瞬でできるツールSizzyの使い方を解説していきます。 [ad] Sizzyとは ▶Sizzy Sizzyのデモをみていただくと一目瞭然。 レスポンシブデザインを様々なデバイスサイズで表示してくれるツールです。 iPhone4iPhone5iPhone6iPhone7 PlusiPad AirNexus 6PGalaxy S4Nexus 7計８つのモバイルレイアウトを一気に表示確認することができます。 しかも縦横どちらも。 Si

ホームページ（ブログも含める）からの集客方法にはいくつか重要なポイントがあります。 ターゲット設定SEO対策更新頻度UI/UXデザインコピーライティングSNSホームページ内部から外部にいたるまで、何気ない部分が全て集客に直結していきます。 実はこれらのことは個人一人でも出来てしまう事ばかりなんです。 今回は弊社AWESOMEで実施しているWEBマーケティングの手法をシェアしていこうと思います。 ホームページ集客方法一覧私達専門の会社以外ではホームページに４６時中張り付いているなんてこと出来ませんよね。 しかし１日の内に１時間でも２時間でもホームページの集客に時間を裂けるのであれば確実に効果を出すことができます。 一人でもできるホームページ集客方法・改善方法を解説していきます。 ターゲットを決めホームページから集客を狙う ホームページからの集客に限らず、様々なビジネスにおいてターゲットの設定

みなさんこんにちは、個別指導塾コミット塾長、AWESOMEの開発担当の船津です。 最近塾で使うアプリをまたrailsで作りはじめました。 流行りものが好きなのでVue.jsを使ってアプリを作ることにしました。 今回はデータバインディングを利用して、フォームの入力値をマークダウンプレビューできるようにしてみましょう。 先に結果を載せておきます。 githubはこちら https://github.com/keisukefunatsu/rails-vue-data-binding-sample インストールと下準備 使用するバージョンは5.1.0 rcです。 いきなりwebpackオプションでvueをセットアップします。 rails new --webpack=vue 適当な入力フォームとデータを作りたいのでscaffoldします rails g scaffold question title

今年３０歳になる、萬野です。 この歳でやっと勉強法が分かってきたような気がしてきて、日に日に勉強が楽しくなってきている今日このごろです。 ※好きな勉強に限る インターネットが普及した昨今、今では世界中の大学が無料のオンライン講座を開講しています。 大学に行きたくても行けない人。社会人になってから、空いてる時間で勉強をしたい人様々な理由の方が無料で分け隔てなく、講義を受講することができます。 オンライン環境さえあれば、スマホやPCから視聴できるとあって日本はもちろん世界中の方が活用されています。 今回はそんな、MOOCを一気にまとめてみました。 MOOCを活用して勉強を充実させよう！MOOCとはMOOC（Massive Open Online Courses) インターネットを容易た大規模公開オンライン講義のことを指します。 フリーミアムモデルとして運営し、大学のブランド力、知名度アップに貢

WEBデザイナー、WEBディレクターにかかわらずWEBデザインの制作やミーティングの際、参考サイトを探される方は少なくないことでしょう。 「このような雰囲気のサイトにしませんか？」 「このようなレイアウトはいかがでしょうか？」 参考サイトと共にWEBデザインを固めていく事は制作の現場ではよくあります。 WEBデザイナーにとっても、初めて関わるジャンルの案件や行き詰ったときなんかはWEBデザインの参考にするために多くのサイトを渡り歩きます。 そんな時に役に立つのがWEBデザイン参考サイトです。 星の数ほどあるWEBサイトをまとめてくれている、WEBデザイン参考サイトが実は沢山あります。 うまく活用することで、参考サイトを探す時間を限りなく短くすることができます。 今回はそんなWEBデザインのまとめサイトを一気にまとめてみました。 WEBデザインに関わる方は是非ブックマークしてくださいね。 W

プログラミングが出来なくても、簡単にかっこいいホームページが作れちゃう。 そんな魅力的な無料ホームページ作成ツールが世の中には沢山あります。 テンプレートも豊富で、自動挿入される広告やドメインだけ気にならなければ、十分すぎるくらいかっこいいホームページが作れます。 日本では「WIX」「Jimdo」といった無料ホームページ作成ツールが人気で度々比較されたりします。 どちらもしっかりと作り込めばスタイリッシュかつ今風のホームページが作れちゃいます。 企業のサイトのような作り込んだサイトを作成したい場合、不自由を感じる場合もあります。 とはいえ、私達WEB制作会社目線で見てもとても良くできていると感じるテンプレートが豊富です。 また最近では無料ホームページ作成ツールの中には 「ネットショップを気軽に始めてみたい」 という方にも最適なサービスも出てきています。 趣味で始めたいテストマーケティング用

ページ内リンクには色々ある。仮想環境などでテーマを作る際、ページ同士をつなぎ合わせるリンク設定は非常に大事です。 しかしワードプレスのページ内リンクには様々な指定方法があり、戸惑いますよね。 頻繁にお世話になるCodexにもこんな風に記載してます。 パーマリンクを使用しないリンク <a href=”/index.php?page_id=42″>固定ページのタイトル</a> パーマリンクを使用したリンク <a href=”/index.php/a-test-page”>テスト用の固定ページ</a> テンプレート内の動的なリンク <a href="<?php echo get_permalink(ID); ?>">これはリンクです。</a> etc… 外部リンクCodex んー迷いますね。 僕も初めは <?php echo get_permalink(ID); ?> をよく使ってました。 でも

最近パスタマシーンを手に入れたので、パスタを作りたくて仕方がないマンノです。 パスタ作りの話を書きたいのは山々なんですが、今回は静的サイトジェネレーターを紹介いたします。 弊社でもjekyllといった静的サイトジェネレーターを活用してサイト制作を行ないます。 静的サイトジェネレーターを上手く活用することで、静的サイトを今までよりも遥かに早く構築することができます。 今回は２０１７年注目の静的サイトジェネレーターをご紹介致します。 静的（スタティック）サイトジェネレーターとは静的（スタティック）サイトジェネレーターは、従来のhtml/css/jsで構築のされたサイトを効率よく、作成するためツールです。 header/footerをテンプレート化メルアド、電話番号などを１ファイルで管理しテンプレートタグ化ブログ記事を書いてhtmlファイルを自動生成従来ですと、全てのサイトを修正したり、ファイル

台湾在住ライターだった頃からSEOについては人一倍勉強をしていたマンノです。 SEOに元々興味があったわけではないのですが、クライアント様から 「SEO意識して書いてね♪」 って口酸っぱく言われ続けてきたので、SEOを意識するようになりました。 そんなこんなで、今ではSEOの事しか頭にありません。 さて、今回はそんなSEOマニアの私が、 SEOってなに？SEOってどうやって勉強したらいいの？SEOを自分で対策するにあたって参考になるサイトとかない？という問題を解決できる、厳選サイト及び本を一挙ご紹介したいと思います。 マーケッター、ディレクターはもちろん、SEO対策が必要と感じている方全員に読んで頂きたいサイト・本です。 SEOについて学べるサイト・本を集めて見ました！Google検索エンジンスターターガイド ▶検索エンジン最適化スターターガイド SEOを学ぶ前にかならずチェックして置きた

bot作成に悩むみなさんこんにちは。日本Integromat推進委員会会長（自称）、個別指導塾コミット塾長、AWESOME開発担当の船津です 今回もアプリ間の通知をGUIで設定できる最強ツールのintegromatの使い方を紹介します。 前回記事はこちら IntegromatでgithubのissueとSlackを連携する 公式はこちら https://www.integromat.com/en/ まだbot作成で消耗してるの？些細な事で張り切ってbotを作って工数を無駄遣いしていませんか？githubへpushしたらslackに通知githubへpushしたらtrelloで起票githubに特定のコミットコメントが来たら…togglでタスクを開始したら…trelloで起票したら…-メールが来たら…googleカレンダーが更新されたら…安心して下さい！全てintegromatが実現します！

「プログラミングをはじめてみたいけどスクールに通うお金はない」 たったそれだけの理由でプログラマーへの道を諦めていませんか？ 今はインターネットで簡単にプログラミングを学べる時代になりました。 かくいう私も高いお金を払ってスクールに通いプログラミングを学んだりはしていません。 プログラミング学習をおこなう上で、今はインターネット上で簡単に、無料でプログラミング学習を始められるようになりました。 しかも、どのサイトも分かりやすく、スクールに通うよりも早く実力をつけることができるサイトばかりです。 スクールに通わずとも、インターネットの無料サイトだけで十分に即戦力になるだけの実力をつけることができるようになります。 お金がないプログラミング学習難しそうとりあえず勉強をしてみたい新しい言語に挑戦したい今回はインターネット上の無料プログラミング学習サイトを活用し、実際に業務でコーディングを行えるま

WordPressいじってますか？ Wordpressを弊社でも日頃からいじりまくっています。 テーマ開発などを行う際のテスト環境構築はどのようにされていますか？ 弊社では主にWockerを使用しています。 ですが、最近Cloud9を触るのが楽しくなってきまして。 Cloud9のWordpress構築も十分速いのですが、 「コマンド一発でプラグインもインストールもテストデータも全部設定完了させたいなー」なんておもいまして。 wp-cliのインストールWordPressインストールWordPress日本語化記事のテストデータをインストールプラグインインストールWordPress、プラグインを最新版にアップデート上記の項目を全部コマンド一発で終わらせてしまおうと思います。 今回こちらの記事を参考にコードを作成しました。 https://note.next-season.net/808 Wock

皆様、こんばんは。 金澤です。 今日は背景画像の真ん中に文字を配置するやり方を。 横方向は左右のmarginをautoにしたり、 テキストの場合はtext-align:center;で表現できますが、 縦方向の中央揃えって flexboxにしたり、 table-cellにしたりややこしいですね。 できるだけdisplayはいじりたくねーよ！ な、あなたに送ります。 要素の高さ固定で、テキストが一行の時。2パターンご用意いたしました。 こんな感じです。 １つ目は、背景画像の高さを、line-heightで調整しています。 2つ目は、要素に高さを指定している時。 この場合は要素の高さとline-heightを合わせることで中央に配置しています。 テキストが二行以上の時。要素の高さが固定されている時は、こんな感じで揃えましょう。 複数行の場合line-heightで指定すると、 段落同士の距離が

※2018/05/11　Parallels Desktopでの設定方法を追記しました。 本当IE絶滅したらいいのに。って思ってるのは僕だけではないと思います。 フロントエンドにとって悩みのタネがIEをどこまで対応させるのか。ではないでしょうか。 XPのサポートが終了しても今なおXPを使われている方も少なくありません。 Windows10になってEdgeという新しいブラウザにはなりましたが、まだまだIE9やIE8にも対応してほしいという要望もあります。 macでコーディングしている人ですと、わざわざWindowsを起動させたりしてチェックするのって本当に面倒ですよね。 でもMacでも簡単にIEのチェックを行うことができるんです。 しかも無料！ そんなmacユーザー必見！のMacでIEとEdgeの確認を一気に行う最もクールな方法をご紹介します！ Windowsをわざわざ買わなくてもOKなこの方

MarsEditとYoast SEO/All in One SEOを連携させる設定を大公開！これであなたもSEOマスター！ MarsEdit使ってますか？ もうかれこれ使い始めて１ヶ月ほど立つのですが、使えば使うほど愛が深まって行くように感じます。 まだMarsEdit使ってない！って方はこちらの記事でMarsEditの素晴らしさを感じてください。 ライター憧れのMarsEditで爆速ライティングできるか試してみた！ WordPressとMarsEditの相性は最高で、アイキャッチ以外はMarsEdit上から設定が行えます。 また殆どのWordpressではAll in one seoもしくはYoastSEOを導入されてることでしょう。 弊社AWESOMEでもYoastSEOは導入されています。 ブログ投稿の際、MarsEdit上からmeta discriptionやmeta keywor

みなさんこんにちは個別指導塾コミット塾長、AWESOMEの開発担当の船津です。 今回は弊社ブログにブログカードをつけたい、という要望があったのでつけてみました。 もう下に出てますね。これが自動で挿入されるようにしてみましょう。 このブログもカードだらけにしていきますよ―！！ ブログカードとはブログカードとは、こんな感じのやつです。これははてなブログさんのものになります。 今回の記事はこちらのサイトを参考に作成しました。 ありがとうございます。 作っていきます一行のみのURLをカードと置き換えることができるようなコードを作ります。 準備するものプラグインを準備します。 Pz-LinkCardというプラグインが人気のようなのでこれでいきましょう。 Pz-LinkCard このプラグインのまま使用しても良いのですが、ショートコードの挿入が面倒なので、自動化しましょう。 functions.php

皆さんこんにちは個別指導塾コミット塾長、AWESOME開発担当の船津です。 今回はクライアントサイドで用いられるモバイルデータベースの筆頭である、realmを使ってみます。 エキサイト翻訳、amazonなど有名どころも使っていると噂のすごいやつです。 SQLiteよりも軽くて早いとか！？ 詳しくは公式サイトをどうぞ https://realm.io/docs/react-native/latest/#writes 細かいことはわからないですが、早速試してみましょう今回は猫の名前を入れるとリストビューで表示される、というものをつくります。今回は猫の名前以外のパラメータは固定です。このあたりは次回フォームを導入して解消してみましょう。と、その前に、以下のコマンドを実行してreact nativeのプロジェクトを作成し、realmをインストールして下さい。 ract-native init re

※2017/04/25　EvernoteとWordpressの連携について追記 前回siriからTrelloにカードを追加する方法をご紹介した際にIFTTTをご紹介いたしました。 最後説明すると、LINEとか、WordpressとかTwitterとかをつなげて、 ○○したら○○する。 といった自動化が実現できるツールです。 前回は、「Googleカレンダーに新しいスケジュールが追加されたら、Trelloにカードが追加される」といった具合。 今回紹介するZapierも同じサービスです。 でも同じサービスです。で終われないほど、Zapierには素晴らしい点がたくさんあります！ 今回はそんなZapierのご紹介です。 Zapierのここがすごい！IFTTTより遥かに多いサービスと連携 IFTTTが約160サービスと連携できるのに対して、 Zapierはフィルターなどを含めると５００以上もの連携が

※2016/10/29　追記 スケジュール管理やTODO管理。 普段あなたはどのように管理していますか？ 私も以前はTodoistを使ってみたりしたのですが、いかんせん飽きてしまう。 でもやっぱりTODOは必要だしなぁ。。と。 案件が増えてきたり仕事が増えれば増えるほど、TODOリストが欲しくなります。 そこで出会ったのがTrelloでした。 「会社全体で進行状況や納期が把握しにくい」 という声が上がってきた為、Trelloでガントチャートを使えるように設定してみました。 ついでに、ガントチャートだけじゃなくて色々Trelloについて調べたのでシェアしたいと思います。 ※工数管理などをしたい場合はTogglとの連携も検討してみてはいかがでしょうか。 ▶Togglを使って時間を意識した仕事をしようぜ！ Trelloとは カードをドラッグアンドドロップしてリスト間を移動させることで進捗を表現で