2019年11月30日 星期六

2019年11月28日 星期四

2019年11月26日 星期二

淡海輕軌 x 幾米主題列車活動網站

淡海輕軌 x 幾米

最近在忙的專案上線了,這是淡海輕軌跟幾米主題列車的活動網站,主要只做手機版,但電腦版應該不至於壞掉只是相對簡單很多。

網站網址

點進去後可以看到介紹。
淡海輕軌 x 幾米

另外有一些輕軌的小知識。
淡海輕軌 x 幾米
淡海輕軌 x 幾米



輕軌那邊也有對各站做介紹,還有周邊可以去的景點推薦。
淡海輕軌 x 幾米
淡海輕軌 x 幾米


還有自動抓取 ig hashtag 的功能。
淡海輕軌 x 幾米


這個主要是有 AR 跟小遊戲,但因為這部分不是我做的,有興趣的朋友可以玩玩看。
淡海輕軌 x 幾米
Read more

2019年11月25日 星期一

升級 Mac 的 php 版本

Mac 本身內建有 php,如果想要升級版本的話就需要自己去下載並安裝,先用以下指令可以查看目前使用的 php 版本:
php --version

再來透過網路安裝新版的 php
curl -s http://php-osx.liip.ch/install.sh | bash -s 7.3

經過一段時間安裝後應該是安裝成功了,但查看版本可能還是舊版的 php,這時候再加上這段就好了:
export PATH=/usr/local/php5/bin:$PATH
Read more

2019年11月24日 星期日

2019年11月23日 星期六

2019年11月22日 星期五

Photoshop 的免費 UI 標示工具- Size-Marks-PS

現在雖然有不少好用的原型工具,像 Adobe XD 或 Sketch,但還是可能會收到一些不是用這些原型工具的檔案,如果是 photoshop 可以選擇這個免費的工具來幫忙標示 UI 的間距。

首先到 github 下載 Size-Marks-PS 這個 plugin

下載後依以下路徑安裝到 photoshop

OS X: /Applications/[Photoshop]/Presets/Scripts/
Windows: C:\[Program Files]\Adobe\[Photoshop]\Presets\Scripts


接下來重開 photoshop 就可以使用了,把要標示的距離用選取工具選起來。


接著從檔案 > 指令碼 選擇 Size Marks



這樣就會幫你標示了,如果覺得每次要從選單選很麻煩,也非常建議設定快速鍵,從 編輯 > 鍵盤快速鍵 > 檔案 > 指令碼 找到 Size Marks 就可以設定快速鍵。



這是開發者建議大家設定的快速鍵
OS X: Shift+Cmd+P
Windows: Shift+Ctrl+P

Read more

2019年11月21日 星期四

2019年11月20日 星期三

2019年11月19日 星期二

2019年11月17日 星期日

[TP 合金] 百獸王(聖戰士)

P1200718

一直想買百獸王的模型,但之前錯過 30 週年紀念的後就一直沒有滿意的造型或價位的,這次看到這款 TP 合金的套件,看起來應該中國那邊的廠商,應該是有取得版權吧(?),總之在造型跟價位上很符合我的目標所以就入手了。

P1200701P1200703

造型沒什麼話說,可動性我也覺得 ok,不過這款有說是不能合體分離的,但剛好也是我最不在意的點,要說讓我覺得驚訝的是明明盒子看起來不大,但拿出來擺後卻比我預期的大很多。

P1200704P1200705P1200706

隨便擺一下姿勢。
Read more

2019年11月16日 星期六

2019年11月15日 星期五

2019年11月13日 星期三

2019年11月12日 星期二

手機的 safari, chrome 瀏覽器 100vh 的問題

最近在寫的網站因為需要把內容鎖定在一個頁面的高度,本來在電腦版很自然會想到用 100vh 去設定,但在 safari 會遇到一個問題就是你預期他高度是一個螢幕高,可是他真的是一個螢幕高,也就是手機瀏覽器的 header 跟底下的 nav 會把螢幕蓋掉,這樣就會發生你開的時候有一部分被遮掉了,這個用這張圖來看就很清楚。



查了一下這在 safari 是一個一直存在的問題,後來連手機的 chrome 也會有這樣的情況,還好後來有找到方法試了一下有用就紀錄一下。

css 要改這樣
.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

再加一段 js 去判斷要調整的高度。
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

有興趣研究原理的話可以看這篇:
The trick to viewport units on mobile
Read more

2019年11月10日 星期日

2019年11月9日 星期六

抓取 Instagram(ig) 特定使用者與 hashtag 的照片



因為想要在網站上放特定 ig hashtag 的照片,本來從 api 去研究,但測了半天都抓不到 ig 要我抓的東西,繼續找資料的同時找到了原來有人已經寫好不用透過 api 的方式抓取照片的 plugin了,簡單測試之後發現真的可以用所以就拿來放到網站上了。

外掛網址:instastory.js

因為是 jquery 的 plugin,記得要先讀入 jquery,然後再把 plugin 讀進來。



準備一個照片要讀進來的容器。

然後直接執行,前面加 # 就是讀取特定 hashtag,加 @ 就是讀取特定帳號。

$(".container").instastory({
  get: "#yoga" // or "@username"
});
$(".container").instastory("#yoga");


另外可以設定的值包含:
limit: 6 //想要讀取的照片數
imageSize: 240 //可填入 50, 240, 320, 480, 640


也可以設定樣板:
這些則是每張照片的變數

{{accessibility_caption}}
{{caption}}
{{comments}}
{{image}}
{{likes}}
{{link}}



Read more

2019年11月8日 星期五

使用 javascript SDK 來做 FB/Google 的社群登入

現在網站為求方便,許多都會讓使用者可以用社群網站登入減少認證的麻煩,這邊來筆記一下該怎麼使用 FB 跟 Google 登入的方法。

Google


google 的話要先到 Google API 服務的地方申請一個新的憑證。



接著可以設定一下容易辨識的名字,就可以拿 api 的 id 跟密鑰了。





因為我們是要用 javascript 登入,所以這邊設定網址就不是這麼重要,再來就是實作登入了。

放一顆按鈕:


初始化 google javascript SDK


let Google_appId = "*****.apps.googleusercontent.com";

// Called when Google Javascript API Javascript is loaded
        function HandleGoogleApiLibrary() {
            // Load "client" & "auth2" libraries
            gapi.load('client:auth2', {
                callback: function () {
                    // Initialize client & auth libraries
                    gapi.client.init({
                        clientId: Google_appId,
                        scope: 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/plus.me'
                    }).then(
                        function (success) {
                            // Google Libraries are initialized successfully
                            // You can now make API calls 
                            console.log("Google Libraries are initialized successfully");
                        },
                        function (error) {
                            // Error occurred
                            console.log(error);// to find the reason 
                        }
                    );
                },
                onerror: function () {
                    // Failed to load libraries
                    console.log("Failed to load libraries");
                }
            });
        }



        function GoogleLogin() {
            // API call for Google login  
            gapi.auth2.getAuthInstance().signIn().then(
                function (success) {
                    // Login API call is successful 
                    console.log(success);
                    let Google_ID = success["El"];
                   //這邊可以寫抓到登入資訊後要做的事,比如將會員資料寫到資料庫之類的
                    
                },
                function (error) {
                    // Error occurred
                    // console.log(error) to find the reason
                    console.log(error);
                }
            );

        }

接著就可以這樣拿到 google 登入後的資料了。
// API call to get user profile information
gapi.client.request({ path: 'https://www.googleapis.com/plus/v1/people/me' }).then(
 function(success) {
  // API call is successful

  var user_info = JSON.parse(success.body);

  // user profile information
  console.log(user_info);
 },
 function(error) {
  // Error occurred
  // console.log(error) to find the reason
 }
);

參考:Google Login with Javascript API


Facebook


首先也是先到 Facebook Developer 申請一個 app,並設定一下要用的網域以及拿 app id 及金鑰。


接著一樣放一顆 fb 登入的按鈕


寫 js
//應用程式編號,進入 https://developers.facebook.com/apps/ 即可看到
        let FB_appID = "";

        //FB Login 官方文件:https://developers.facebook.com/docs/facebook-login/web

        // Load the Facebook Javascript SDK asynchronously
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        window.fbAsyncInit = function () {
            FB.init({
                appId: FB_appID,//FB appID
                cookie: true,  // enable cookies to allow the server to access the session
                
                xfbml: true,  // parse social plugins on this page
                version: 'v5.0' // use graph api version
            });

        };

        //使用自己客製化的按鈕來登入
        function FBLogin() {
            
            FB.login(function (response) {
                //debug用
                console.log(response);
                if (response.status === 'connected') {
                    //user登入成功
                    //抓userID
                    let fb_id = response["authResponse"]["userID"];
                    //接著可以對帳號做處理

                   
                } else {
                    // user FB取消授權
                    alert("Facebook帳號無法登入");
                }
            }, { scope: 'public_profile,email' });

        }

完成。
Read more

2019年11月7日 星期四

2019年11月6日 星期三

將 After Effect 轉 svg 的工具套件- bodymovin



After Effect 是很多人在製作動畫時的好幫手,而 svg 的動畫近年來也在網頁上有越來越吃重的表現,但以往 AE 只能輸出影片,手寫 svg 動畫又太耗時,而現在有 bodymovin 這個工具就可以幫我們同時解決這兩個問題了。

首先先到這邊下載套件

下面有幾個安裝的方法,安裝完後把 AE 製作好的動畫依指定的格式匯出就可以了。

接著到網頁開發者這端,將 js plugin 讀入:


接著像這樣把 AE 匯出的 json 檔讀入就可以了。
lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

官方有提供一些既有的 json 檔讓大家測試:LottieFiles

codepen 也有一些範例可以給大家看


See the Pen
The Chameleon from Null Island
by kittons (@airnan)
on CodePen.

Read more

2019年11月5日 星期二

2019年11月4日 星期一

2019年11月3日 星期日

2019年11月2日 星期六

2019年11月1日 星期五

Related Posts Plugin for WordPress, Blogger...