サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
1design.jp
一言まとめ WordPress開発でリモートのデータベースを使いたい! 問題は、踏み台サーバー経由じゃないとデータベースにアクセスできない… SSHのLocal-Forward機能を使えば簡単にできる。 背景・問題点 何もWordPressに限ったことではないのですが、リモートにあるデータベースを開発者らが共有して使いたい場面は多々あると思います。多くの場合、セキュリティ上の理由でデータベースを外部(インタネット)からの接続ができないようになっていることが多いと思います。踏み台を経由しないとデータベースにアクセスできないような構成が定石ですよね。 この記事では、AWSの「EC2 + RDS」という構成を例に、ローカルマシンのPHP(WordPress)から、踏み台の向こうにあるRDSに接続させる方法を紹介できればと思います。 サーバー構成図 (本記事で使うIPアドレスなど、すべて架空のもの
一言まとめ 例えば、セルの値が「完了」だったら、その行全体の色をグレーにしたい時がある。 [条件付き書式]→[カスタム数式]で、セルの複合参照を利用することで、行全体に書式を適用することができる。 例えば、こんな感じのタスク管理用のシートがあるとしましょう。 「状態」を「完了」にすると自動的にその行がグレーになってくれたら便利ですよね。 「ある列のセルの値に合わせて、その行全体の書式を変えたい」ってよくあることだと思います。 「条件付き書式」を使えば割りと簡単にできますよという話です。もちろんExcelでも同じことができます。 「条件付き書式」で行全体に書式を適用する方法 「条件付き書式」はセルごとに適用する機能ですが、セルの複合参照を利用することで、擬似的に行全体に書式を適用することもできます。 やり方は簡単です。テーブルヘッダ以外のセルを選んだ状態で [表示形式]→[条件付き書式] を
一言まとめ WordPressのフレームワークはいろいろあるけど、MVCを取り入れたものがほとんどない。あってもフレームワーク自体がしょぼい。 それならフルスタックフレームワークのLaravelをWordPressで使いましょう! 仕事でよく企業様のコーポレートサイト制作にWordPressを利用しています。当然ですが、企業のHPですから、デザインは独自のものになります。なので、スクラッチから作成するのが常です。 スクラッチとは言っても、ゼロからではさすがにナンセンスですので、何かしらのフレームワークは使いたいものです。選択肢は実にたくさんあります。 ページビルダー機能を提供しているフレームワークもありますが、常にごりごりにカスタマイズする必要があるので、まだ仕事で使ったことがありません。個人的には機能がシンプルなものが一番合います。 ただ、最大の問題はそこではなく… ページビルダー機能が
GoogleがHTTPSに対応したサイトをランキングで優遇する方針を発表してから、Webサイトの常時SSL/TLS化がすごいスピードで進んでいるように感じられます。 今までは有料だったSSL/TLSは、今や let’s encrypt を筆頭に、CloudFlare や Amazon Certificate Managerなど、無料のSSL/TLS証明書を発行してくれるサービスが続出中。もはや常時SSL/TLS化が常識の時代です。 もっとも簡単かつおまけサービスもてんこ盛り(HTTP/2 やら 静的コンテンツのキャッシュやら)の CloudFlare を使ってサイトをHTTPSに対応してみました。 CloudFlare側の設定は最高に簡単なので、さらっと目を通しつつ、WordPressで使う時のポイントだけ紹介します。 ネームサーバーの変更 CloudFlareを使うためにはまず、利用して
要件概要: ボックスのサイズは固定 横長の画像が来たらボックスの横幅に合わせる 縦長の画像が来たらボックスの縦幅に合わせる 画像サイズがボックスサイズより小さい場合はそのまま 縦横中央揃え 結論からいうと、「縦横中央揃え」以外の要件は下記のCSSで実現できます。 img { width:auto; height:auto; max-width:100%; max-height:100%; } ボックス内で画像を縦横に中央揃えさせたい場合も多いと思います。デモを用意しましたので、ご参考下さい。 See the Pen 4 way to keep image ratio inside a box by wang (@yaquawa) on CodePen. 全部で5通りの方法です。ボックスの端をドラッグしてリサイズしてみてください。ボックスのサイズに応じて収まり方も変わってくることが確認できる
WordPressデベロッパーなら誰もが知っている便利なプラグイン「Advanced Custom Fields」ですが、使ってて不満に感じたのは「定義したフィールド名を後から変更する機能がない」ことです。 後からリファクタリングしていると、「やっぱり”book”じゃなくて、”books”にすればよかった… でも、もうデータが入っているしね…」って悩むことってありますよね? フィード名を後から変える方法 ACFではWordPressのメタデータを使ってフィードの値を保存しています。 例えばACF側でフィード名がbookのフィードを作成して、投稿ページ側でそのフィードを埋めて保存すると、データベースのwp_postmetaテーブルにmeta_keyカラムの値がbookと_bookのレコードが2つ挿入されます。bookには記事で埋めた値が入っていて、_bookにはACFが利用するフィードオブジ
Illustrator CS6以降では、「オブジェクト-> パターン-> 作成」を使えば、結果をプレビューしながらパターンを作ることができるようになりました。難しいシームレスパターンでもを直感的に作成できて楽ですよね。 そんなIllustratorで作ったパターンをPhotoshopで使ったり、Webで使ったりしたいことも多々あると思います。「パターンを書き出す」の機能があってもおかしくないのですが、それがないんですよ…(※2016年7月現在) いずれは書き出せるようにはなるだろうと思いますが、それまではこの記事で紹介している方法で我慢して下さいね。 ちなみに、まだIllustratorでパターンを作ったことがないなら、以下の記事が役に立つと思います。 Illustratorでパターン素材を作成するチュートリアルまとめ Step 1. 新規でドキュメント 新規でドキュメントを作ります。 最
また一つ悩みが解決しましたよ! 活字嫌いの私は、日頃から「テキスト読み上げ」機能を活用しまくっています。 だが、一つだけ深刻な問題が… それは、iOSのSafariでテキストを選択するのがストレスで嫌になっちゃうんです(分かりますよね… いくら指でグリグリやっても、全く思い通りにテキストを選択できない苦痛…)。 もう我慢の限界です!試しに「Web Speech API(Speech Synthesis API)」を使って、テキストをクリック(タップ)するだけで読み上げてくれる便利なブックマークレットを作ってみましたので、シェアします。 分かりにくいと思うので、20秒ほどの動画を撮りました。 ブックマークレットの使い方 以下のコードを全選択して、コピー。 javascript:!function(){function e(e){return document.querySelectorAll
一言まとめ LightBoxは時代にそぐわなくなってきた。その最有力候補として浮かび上がってきた PhotoSwipe だが、導入する作業が煩雑なため、jQueryプラグインにした。 JavaScriptのギャラリーライブラリといえば「LightBox」です。むしろ「LightBox」が一種の代名詞にもなったくらい一世を風靡したのです。 しかし、時は2016年。もっとモダンな「Lightbox」はないのか… と、誰もが願うものです。 そして、そんな願いを完璧に応えてくれるライブラリが現れた… それが「PhotoSwipe」です。百聞は一見にしかず、まずはPhotoSwipeの公式サイトのデモをご覧下さい。 圧倒的な人気度 GitHubで言語をJavaScriptに絞って、「gallery」で検索した後、さらにソート順を「Most stars」にした結果。 「PhotoSwipe」のスター数
フリーランスになってから8ヶ月が経ちました。社会人になってから3回転職をして会社には4社勤めましたが、フリーランスでの働き方が一番向いていると感じます。何事にもメリット・デメリットがありますが、私の場合はメリットの方が断然大きいです。今回の記事では、フリーランスになって良かったこと、生活・仕事面で改善されたことをご紹介します。これからフリーランスを目指す方に役立つ内容になれば幸いです。 1. 満員電車通勤がなくなった上に昼寝の時間ができた 都内に勤めていると満員電車通勤は宿命とも言えます。電車の中で読書はできず、できてもスマホでのニュースチェック。乗車率120%の電車に30分以上揺られるのはかなり疲れます。特に社会人になりたてのころは、毎日決まった時間に満員電車に乗るのは大変でした。 対して、フリーランスになると基本自宅業務ですので、満員電車通勤とは無縁になります。さらに、ちょっと疲れを感
一言まとめ ちょっとした工夫でposition : fixed;でも、以下のことが可能。 position : fixed;を設定した要素が、画面からはみ出てもスクロールできる 背景 (body) のスクロールを止める ちょっとしたモーダルウィンド(Modal Window)とか、別レイヤーで画面いっぱいに表示する場面って多々あると思います。 別レイヤーで、画面の縦横いっぱいに表示する時に使う手法は2つしかないです。 position : absolute; position : fixed; fixedのほうが多用されているように思いますが、表示するコンテンツのサイズが大きい時にabsoluteを使う人も多いでしょう。おなじみの「LightBox」でもabsolute使っていますよね? absoluteを使う利点はあまりないと思いますが、十中八九、 「コンテンツが大きくて画面に収まらない
Webサイトを制作する際に、ヒアリングが終わった段階で最初に着手するのがワイヤーフレーム作りです。とても基本的な内容ですが、今回の記事では、これまで自分が学んできたことを改めて文章にしてまとめてみたいと思います。会社員時代、新卒入社した後輩にワイヤーフレームの作成を教える際、実際に踏まえた手順でもありますので、新人教育などにも役立てば幸いです。 なお、今回の記事は100ページ以上の大規模サイトではなく、10-20ページ前後の新規サイト制作やキャンペーンページの制作を念頭においています。 目次 ワイヤーフレームとは? ワイヤーフレームを作成する前に Webサイト(Webページ)のゴールの確認 ターゲットの確認 伝えたい内容と優先順位 手早く、正確なワイヤーフレーム作りのコツ 手書きで簡単にラフを書く ワイヤーフレームの構成要素 初期段階での確認事項 ツールでの清書 ワイヤーフレーム作成に役立
2016年も始まり、そろそろ確定申告の時期が近づいてきました。私は昨年の5月に会社を辞めて6月から個人事業主になったので初めての確定申告です。 今回の記事では、「開業ってどうやるんだろう?」「そもそも確定申告ってなに?」というところからスタートした自分が、参考にした色々な書籍やwebサービスなどを紹介していきます。 目次(時系列順) 税務署に個人事業の開業届を提出 国民の三大義務の一つ、納税 「個人事業の開業・廃業等届出書」の提出 青色申告と白色申告、どっちがいいの? 「事業開始等申告書(個人事業税)」を郵送 個人事業・確定申告の基礎知識を身に付ける そもそも「確定申告」って? おすすめの書籍・サイト Googleアラートへの登録 会計サービスfreee(フリー)に登録、法人用口座の準備 会計サービスfreee(フリー)に登録 会計用口座の準備 売上や経費をまとめる 売上の管理に関して 自
このページを最初にブックマークしてみませんか?
『Freelance Journal フリーランス ジャーナル』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く