CATEGORY

WEB制作・開発

LaravelでCSVダウンロード機能を実装する

/ WEB制作・開発

LaravelでCSVファイル形式でダウンロードする機能を紹介します。データベースに保存されているすべてのデータをCSVと、キーワードで絞り込んだデータをCSVファイル形式でダウンロード出来る機能を実装します。 本編では、ソースコードの紹介だけでなく、新しくプロジェクトを作成して進めます。ソースコードだけ必要な方は ...

:: jQueryライブラリ(MixItUp)を使ってフィルタラブルを実装する

/ WEB制作・開発

以前、jQueryを使ってフィルタラブルを実装する方法を紹介しましたが、jQueryライブラリでMixItUpがあるので紹介します。動きは以前紹介した icon-link :: jQueryを使ってフィルタラブルを実装するとほとんど同じですが、jQueryライブラリはオプションが豊富で動作もスムーズです。 実装もほぼ同じくらいのコード量です。 ...

:: jQueryを使ってフィルタラブルを実装する

/ / WEB制作・開発

jQueryを使ってフィルタラブルを実装する方法を紹介します。フィルタラブルって何ってなっていると思います。フィルタラブルとは写真などの要素のタグを付けておいてボタンをクリックすると、タグと一致するものだけに表示を切り替えることが出来るものです。 こちらの記事で、jQueryライブラリのMixItUpを使った実装方法 ...

:: ワードプレスの管理画面にGoogleAnalyticsタグを追加する方法

/ WEB制作・開発

最近、ワードプレスで作られたウェブサイトの管理画面にGoogleAnalyticsタグを追加しました。個人で運営している場合には問題ないのですが、複数人で運営しているサイトの場合は、管理画面でどのページにどれくらいアクセスされているか気になることもあると思います。そこで、以下のタグをfunctions.phpに書くだけで管理画 ...

:: WordPress(ワードプレス) プラグインを使わずに好きなタグをボタン1つで本文に貼りつける方法

/ , / WEB制作・開発

WordPessでブログを書いていると、テーブルやGoogle Adsenseのコードなどの決まったスタイルやhtmlタグを追加することがあります。その際に毎度予めテキストファイルで保存していたソースコードを開いてコピペしていたのですが、それがとっても煩わしい。。。 それを解決する方法として、以前このブログで記事を書きました ...

:: ワードプレス(WordPress)のアイキャッチ画像の縦横比を維持してサムネイルを表示するテクニック

/ , / WEB制作・開発

ワードプレス(WordPress)を使って不特定多数でサイトを運営する際によく発生する、画像の縦横比率問題についてのエントリーです。 例えば、4:3の画像を維持したデザインしていても、アップロードする画像サイズによっては縦横比が崩れてしまう場合があります。どんな画像がアップロードされても必ず縦横比を維持するテクニ ...

:: wordpressのグローバル変数をvar_dump();

/ , / WEB制作・開発

wordpressのグローバル変数をvar_dump();で取得できる情報をメモ。コーデックスにも載っているし今更感もありますが勉強のために書いておきます。 バージョンは4.7.3で、参照サイトであるwordpress コーデックスのグローバル変数をvar_dump();した結果でどんな情報が取得出来るかを記載しています。     ...

:: WordPressのアクセスランキングをGoogle Analytics APIで実装する方法

/ , / WEB制作・開発

このサイトのアクセスランキングをAnalyticsデータを参照して実装したので紹介します。 アクセスランキングはプラグインを使うと簡単に実装出来るのですが、あまりプラグインに依存したくなかったのとプラグインをインストールすることによりデータベースのテーブルが作成されるのがあまり良い方法ではないと思ったので、G ...

:: ローディング用のGIFアニメーションアイコン作成から実装まで

/ WEB制作・開発デザイン

最近ネットサーフィンしているとよく目にするローディング画像を作成する機会があり、色々と調べたのでまとめました。 Loading GIF Generatorを使って簡単に作成できるサービスと、ローディングアイコンの作成方法を紹介します。 ローディングアイコンの作成方法は、よく利用しているCode Penで公開されているコードを参 ...

:: 宮古島の魅力を発信する動画サイトを公開しました!

/ / WEB制作・開発デザイン

最近、友達のお父さんが運営している、宮古島の魅力を発信するちゅらいゆ(美魚)サイトを作成させてもらいました。 定年される前から宮古島に惹かれ、海を撮影され続けてきて、その間にサンゴ礁の破壊を目の当たりにしてきたとのことです。いろいろな魚と宮古島のきれいな海がなんとも言えない魅力で、感慨深いものがあり ...

:: Google APIでアクセス実績を取得し、crontabでcsvファイルを自動生成する方法 php

/ , , / WEB制作・開発

先日、業務効率化のためにGoogle APIでデータを取得してcsv保存し、cronで毎日バッチ処理をする作業を行った。GoogleのAPIまわりが少し分かりずらかったのと、phpを使ったcsv保存にもブラウザでアクセスした場合とコマンドラインからアクセスした場合とで違ったのでAPI連携からcsvで保存、cronで自動処理までの一連の流れを ...

:: Bitbucketのgitでソースコードを管理する作業手順

/ , / WEB制作・開発

すでにWEBサイトを運営していて Bit bucketを使ってソース管理をしたい!ってなった時の手順についての記事です。すでにサイトを運営しており(ソースコードを持っている)、自分のパソコンからBitbucketを通じて管理する手順です。 Gitを使うと、ソース管理を行うことができるので、いつでも過去のソースコードに戻ること ...

:: cakephp3 validationのエラーメッセージが表示されない時の解決方法

/ / WEB制作・開発

cakephp3で、ユーザーのアカウント登録周りを作っいた時に遭遇したcakephp3ならではの仕様。結構はまって、ネットにも情報がなかったので同じ境遇の人たちの為にメモしておきます。 起きたことは、modelのvalidation機能を使った場合にメッセージだけ表示されないという問題です。 結局teratailさん(https://teratail ...

:: Instafeed.jsとOwl.jsで実現するカルーセルスタイルのInstagram写真のAPI連携

/ , , / WEB制作・開発

ブログのフッター部分でも使っているInstagramのAPIを使ってWEBサイトで投稿写真を表示 + カルーセルでスライドさせる方法についてのメモです。やり方はとっても単純なんだけど知っているとかなり便利で使えます。 Wordpressのプラグインは一切使わずに、JQueryのInstafeed.jsを使ってInstagramの写真を連携し、Owlを使 ...

:: macのphp.iniに関するメモ

/ / WEB制作・開発

Macのphp.iniに関して、時々しか触らないのでコマンドをいつも忘れてしまうのでメモ。それにしてもいつまでも覚えられないのは困ったものです。 ※コマンドは全てMacです。   ●php.iniの設定反映 => appacheのリスタート [crayon-5c940b1b2590b572599421/]   ●php.iniファイルを探す [crayon-5c940b1 ...

::cakephpをcomposerでインストールしようとしたらintlがなかったのでインストールした件

/ , , / WEB制作・開発

cakephp 3.xのチュートリアルをcomposerでインストールしようとしたらIntlがないと怒られてエラーになった際の対処方法についてメモ。正直かなりはまったので同様の問題で困っている人のためにメモしておきます。 composerのインストールは以下の手順で行った。 http://book.cakephp.org/3.0/en/tutorials-and-examples ...

:: wordpressのwp_postsに登録されている記事の一部のテキストを一括で変更する方法 MYSQL

/ , / WEB制作・開発

Wordpressで投稿している記事の特定の文字列を一括で変更する方法をメモ。まだブログを公開して間もないウェブサイトであれば1ページずつ編集するのも一つのやり方だけど100ページとかあったら結構大変ですよね。そこで調べたら一瞬で対応できました。   やり方はなんてことはない、wp_postaテーブルのpost_type ...

:: 使えるCSS3のプロパティ

/ / WEB制作・開発デザイン

最近のWEBサイトでよく使われているCSSのプロパティについて。今までは画像で対応していたことをCSSで実現できるようになった。たくさんあるプロパティの中でも結構目にする有名どころで使えるプロパティをメモ。 なお、CSS3を使う場合は通常対応ブラウザに注意して使うべきです。中でも主要ブラウザと呼ばれる代表的な ...

:: BootstrapのGrid system

/ , / WEB制作・開発デザイン

Twitter社が提供しているBootstrap.cssの使い方をメモ。ダウンロードの仕方から導入までの基本的な説明は他のブロガーさんが詳しく説明されているので敢えて触れずに、Grid Systemの具体的な使い方を中心に書いていきます。全くBootstrapを知らない人のために一応さわりだけ触れておきます。   Bootstrap.cssとは ...